Vue.js入门学习--父子组件的说明和简单通信（十）

学习组件的时候，我们往往纠结于什么是子组件，什么是父组件，我的理解是

针对全局组件注册来说

注册的组件是 子组件，包含子组件使用的环境（元素）叫做父组件，这就是为什么，全局组件注册要在根Vue实例实例化之前注册的原因所在吧，这个根Vue实例其实就是我们的父组件的数据模板，又称父组件的数据渲染部分，我们来看下面一段demo

    
    
    



    
    

        {{total}}
        

        

        
        
        
    

我们的子组件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，因此我们最终在浏览器中会看到如下效果：