补充一下：之前没提到，这里是一个父子组件通信的方法

如果想要使同一个组件实现不同的效果，那么可以这样做。

把需要封装的组件模板写在template中

<template id="counter-template">

    <h1>{{heading}}</h1>

  <button @click="count+1">Submit{{count}}</button>

</template>

其中在建立组件时，用到了一个props属性，可以读取到引用组件里的自定义属性值，并且随着用户的操作进行动态的改变

我觉得这个属性特别的好，还是很好用的，所以在这里记录一下；

能够实现父子组件间的通信，后面还会更新其他一些内容

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>component</title>

  <script src="Vue.min.js"></script>

</head>

<body>

    <div id="app">

      <counter heading="Likes"></counter>

      <counter heading="DisLikes"></counter>

    </div>

    <template id="counter-template">

        <h1>{{heading}}</h1>

      <button @click="count+1">Submit{{count}}</button>

    </template>

    <script>

       Vue.component('counter',{

         template:'#counter-template',

         props:['heading'],

         data:function(){

           return { count:0};

         }

       });

    </script>

</body>

</html>

Vue之组件使用(二)的更多相关文章

  1. vue中组件的四种方法总结

    希望对大家有用 全局组件的第一种写法 html: <div id = "app"> <show></show></div> js: ...

  2. Vue学习笔记-Vue.js-2.X 学习(二)===>组件化开发

    ===重点重点开始 ========================== (三) 组件化开发 1.创建组件构造器: Vue.extends() 2.注册组件: Vue.component() 3.使用 ...

  3. 浅尝Vue.js组件(二)

    本篇目录: 插槽(Slot) 插槽内容 作用域 具名插槽 作用域插槽 独占默认插槽的缩写语法 解构插槽Prop 使用场景举例 动态插槽名 具名插槽缩写 动态组件&keep-alive 异步组件 ...

  4. vue的组件化运用（数据在两个组件互传，小问题总结）

    一.vue的组件化应用 首先,知道有哪些相关的属性需要用到,再慢慢去理解,运用. 1.两个vue页面 2. slot占位符(可用可不用) 3.props内置属性 4.watch监听函数 5.impor ...

  5. vue父子组件的传值总结

    久违的博客园我又回来了.此篇文章写得是vue父子组件的传值,虽然网上已经有很多了.写此文章的目的就是记录下个人学习的一部分.接下来我们就进入主题吧! 在开发vue项目中,父子组件的传值是避免不掉的. ...

  6. 从零开始学 Web 之 Vue.js（六）Vue的组件

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...

  7. Vue父子组件和非父子组件传值问题

    父组件跟子组件之间的传值(具体参考lonzhubb商城) 1.父组件传值给子组件形式,ifshop是要传的对象,右边ifshop代表要传的这个对象的数据,如果只是传常量,那么属性可以不用加':'(表示 ...

  8. Vue 根组件,局部,全局组件 | 组件间通信,案例组件化

    一 组件 <div id="app"> <h1>{{ msg }}</h1> </div> <script src=" ...

  9. Vue 创建组件的方式

    Vue 创建组件的方式 2018年08月07日 11:10:56 虔诚带着决然 阅读数:1015   版权声明:本文为博主原创文章,未经博主允许不得用做其他商业活动. https://blog.csd ...

随机推荐

  1. 【Atcoder】 AGC032赛后总结

    比赛前 emmm,今天是场AGC,想起上次我的惨痛经历(B都不会),这次估计要凉,可能A都不会Flag1 比赛中 看场看了波\(A\),咦,这不是很呆的题目吗?倒着扫一遍就好了. 然后切了就开始看B, ...

  2. 基于tkinter的九型人格测试系统介绍

    基于tkinter的九型人格测试系统介绍 一.程序代码地址,GitHub 二.程序介绍 1.login.py 登录界面: 注册界面: 2.mainWindow.py 登录成功之后的界面: 3.doTe ...

  3. 学习使用Apollo配置中心

    Apollo(阿波罗)是携程框架部门研发的配置管理平台,能够集中化管理应用不同环境.不同集群的配置,配置修改后能够实时推送到应用端. Apollo官网地址 如何安装服务端可以按照上面官网的步骤. 这里 ...

  4. opencv实现canopy算法

    #include "stdafx.h" using namespace cv; int main(int argc, char** argv) { Mat img=imread(& ...

  5. 在matlab中实现PCA算法

    function [V,S,E]=princa(X) [m,n]=size(X); %计算矩阵的行m和列n %-------------第一步:标准化矩阵-----------------% mv=m ...

  6. MySQL数据导入到Mongo

    背景:如题干所述,需要将一份数据导入到mongo数据库,减少项目依赖的数据源. 解决方案: 使用mongo自带的mongoimport工具. 首先在test库里创建一个空集合:[import_test ...

  7. Android学习总结——输入法将BottomNavigationBar(底部导航栏)顶上去的问题

    在应用清单中给当前<Activity>设置: android:windowSoftInputMode="adjustPan" 关于android:windowSoftI ...

  8. Python -- 多媒体编程 -- 音乐播放

    使用win32库的WMPlayer.OCX开发一个简易的音乐播放器 import sys from PyQt4 import QtGui, QtCore from win32com.client im ...

  9. MySQL Replication之主从切换

    在生产环境中,我们的架构很多都是一主多从.比如一个主数据库服务器M,两个从数据库服务器S1,S2同时指向主数据库服务器M.当主服务器M因为意外情况宕机,需要将其中的一个从数据库服务器(假设选择S1)切 ...

  10. 我的MQ笔记

    1.安装IBM MQ 1.1.安装先决条件: (1)WebSphere  Eclipse  Platform  V3.01 (2)为Windows域用户配置WebSphere MQ用户 1.2.安装程 ...