学习组件的时候，我们往往纠结于什么是子组件，什么是父组件，我的理解是
针对全局组件注册来说
注册的组件是 子组件，包含子组件使用的环境（元素）叫做父组件，这就是为什么，全局组件注册要在根Vue实例实例化之前注册的原因所在吧，这个根Vue实例其实就是我们的父组件的数据模板，又称父组件的数据渲染部分，我们来看下面一段demo
<html>
<head>
<title>父子组件</title>
<meta charset="UTF-8">
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<!-- #app是被挂起的元素，也就是最外层的div，其就是父组件，数据模板为实例app的数据渲染 -->
<div id="app">
<span>{{total}}</span>
<br>
<br>
<!-- 子组件my-button的点击事件再次触发了自身的事件increment，从而最后改变了父组件中的total -->
<my-button @increment='incrementTotal'></my-button>
<my-button @increment='incrementTotal'></my-button>
</div>
</body>
<script>
Vue.component('my-button', {
template: "<button @click='incrementCounter'>{{counter}}</button>",
data: function () {
return {
//每个子组件的counter计算器都是从0开始的,各自拥有counter，互补干扰
counter: 0
}
},
methods: {
incrementCounter: function () {
this.counter++;
//子组件调用的同时，再触发自身监听的increament事件
//子组件通过 events 发送消息给父组件，父组件则通过 props 向下传递数据给子组件
//因此，父子组件之间的关系可以概述为：props 向下，events 向上
this.$emit('increment') //$emit触发子组件的一个事件
}
}
})
var app = new Vue({
el: '#app',
data: {
total: 0
},
methods: {
incrementTotal: function () {
this.total++;
}
}
})
</script>
</html>
我们的子组件my-button都有自己的数据模板，那就更不用说我们的父组件div了，没有的话，上一篇我们已经说过了，是毫无意义的，我们看一下，所谓的根Vue实例，其实就是父组件div的数据模板（数据渲染）
以上demo的意思我这里按照自己的理解说明一下
子组件刻的是button按钮的模子，且绑定了click事件，用来点击一次，就将当前子组件的counter计数器加1，counter的初始值，我们在每个子组件的数据data函数中设置过了，都是从0开始，而且，我们子组件的事件click执行的JavaScript代码是一个方法名，直接定位到自身组件的methods方法中的incrementCounter函数，函数中，我们除了执行计算器+1外，我们还触发了子组件自身的另一个事件increment，这个event传递到了父组件中，直接作用在父组件的数据模板上，使得，父组件的数据渲染部分，将total变量+1，也就是，子组件自身发生变化，是独立的，子组件1自身counter+1不会影响子组件2的counter,但是，两个子组件的counter+1却会影响父组件的数据渲染，通过自身的counter+1触发父组件的total+1，因此我们最终在浏览器中会看到如下效果：
版权声明：本文为Appleyk原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。