Vue组件之间的通信

1、组件：是vue的重要的特征之一，可以扩展html的功能，也可以封装代码实现重复使用

2、组件的创建

（1）非脚手架方式创建：

1️⃣使用vue.extend创建组件

2️⃣使用vue.component注册组件

3️⃣在html页面使用组件

（2）使用template创建组件

1️⃣使用template创建html页面模板，并给template定义id属性

2️⃣使用template的id属性值进行注册

注：在Vue实例外部通过Vue.component创建或注册的组件称为全局组件

        局部组件：创建方式和全局组件的创建方式一样，注册时必须放在Vue实例内部通过components进行注册

（2）在WebStorm中使用脚手架创建组件：

1️⃣创建Vue component，组件命名采用驼峰命名

    

 3、组件中的data：

（1）每个组件都有自己的数据：即每个组件都有自己的data

（2）vue实例的data和组件中的data的区别

        1️⃣vue实例的data是一个对象

        2️⃣组件的data必须是一个方法，该方法必须返回一个对象

        3️⃣vue实例中的data和组件中data在使用方法上是一样的

4、组件中的methods：和vue实例中的methods用法相同

5、Vue组件之间的通信

（1）Vue组件之间的关系：

        1️⃣父子关系：A组件和B组件、B组件和C组件、B组件和D组件

        2️⃣兄弟关系：C组件和D组件

        3️⃣隔代关系：A组件和C组件、A组件和D组件

（2）父组件向子组件传递数据： 通过props方式向子组件传递数据(在子组件中添加props属性)

        父组件：App.vue

        子组件：SmallSon.vue

        App.vue ——>users数组 ——> SmallSon.vue

SmallSon.vue:

App.vue:

（3）子组件向父组件传值(通过事件形式)

 SmallSon:

App.vue: