关于vue通信的知识汇总以及父子组件的……

1.` ⽗传⼦ ` 在⼦组件的标签上定义属性 ⼦组件通过 props 来进⾏接受 , 可以通过数组的⽅式进⾏接

受 , 也可以通过对象的⽅式来进⾏接收 , 如果⽗组件没有传递属性 , ⼦组件可以 default 来设置默认值

2.` ⼦传⽗ ` ⼦组件通过 this.$emit(" ⾃定义的事件 ", 要传给⽗组件的数据 ), ⽗组件通过⼦组件

的标签监听⾃定义的事件 , 通过⽅法来接收传递的数据

3.` ⾮⽗⼦组件通信 ` 通过中央事件总线 , 我们也称之为 eventBus,

我们需要创建⼀个空的 js ⽂件 , 导出这个空的 vue 实例

传数据的时候 this.$bus.$emit 传

接数据的时候是在 钩⼦函数 created 中 this.$bus.$on 接收 第⼀个参数是事件名称 第⼆

个参数是⼀个回调函数 包含了要接受的数据 , 以上就是⾮⽗⼦组件通信的⽅式

4. 利⽤ `vuex` 进⾏组件通信 把公共的数据存在 vuex ⾥就可以实现组件之间都能使⽤这个数据

了

5. 其实 ` v-model` 也能实现组件通信 因为 v-model 就是 :value 和 @input 事件的合写

如果在⼀个⼦组件上使⽤ v-model 也能实现⽗⼦组件之间的通信

6. ⽤ ` 本地存储 ` 来 完成组件通信

7. 通过 `ref 和 refs` 实现组件之间的通信

8.`.sync` 修饰符

9.`$parent 和 $children`

在⼦组件内可以直接通过 $parent 对⽗组件进⾏操作，在⽗组件内可以直接通过 $children 对⼦组

件进⾏操作

在⽗组件调⽤⼦组件时候要加下标也就是 $children 是⼀个数组 因为可以有很多个⼦组件

10.`provide 和 inject`

⽗组件通过通过 provide 提供变量 ⼦组件中通过 inject 注⼊变量，不论嵌套了⼏层⼦组件 都

能通过 inject 来调⽤ provide 的数据

11.`$attr+$listener`

如果⽗组件 A 下⾯有⼦组件 B ⼦组件 B 下⾯⼜有⼦组件 C 如果 a 组件的变量和⽅法想要传给

组件 C 的时候 就⽤到这个⽅法 适⽤于多级组件传值

在 B 组件中给 C 组件绑定 v-bind="$attrs" v-on="$listeners" 然后在 C 组件中就可以

直接使⽤ a 传来的属性和⽅法了（简单来说： $attrs 与 $listeners 是两个对象， $attrs ⾥存

放的是⽗组件中绑定的⾮ Props 属性， $listeners ⾥存放的是⽗组件中绑定的⾮原⽣事件。）

组件通信⽬的：传递或共享某些数据，解决组件间数据⽆法共享的问题

props 选项作⽤：设置和获取标签上的属性值的

vue 组件化理解：

1. 组件是独⽴和可复⽤的代码组织单元。组件系统是 Vue 核⼼特性之⼀，它使开发者使⽤⼩型、独⽴

和通常可复⽤的组件构建⼤型应⽤；

2. 组件化开发能⼤幅 ` 提⾼应⽤开发效率、测试性、复⽤性 ` 等；

3. 组件使⽤按分类有：⻚⾯组件、业务组件、通⽤组件；

4.vue 的组件是基于配置的，我们通常编写的组件是组件配置⽽⾮组件，框架后续会⽣成其构造函

数，它们基于 VueComponent ，扩展于 Vue ；

5.vue 中常⻅组件化技术有：属性 prop ，⾃定义事件，插槽等，它们主要⽤于组件通信、扩展等；

6. 合理的划分组件，有助于提升应⽤性能；

7. 组件应该是⾼内聚、低耦合的；

8. 遵循单向数据流的原则。