本文详细介绍了Vue中父子组件、子父组件、兄弟组件之间的通信方式，包括props、$emit、eventBus、Vuex、本地存储、v-model、$attrs/$listeners、provide/inject以及$parent/$children。这些机制在不同场景下用于实现组件间的数据流动和交互，是理解Vue应用架构的关键。
1.⽗传⼦
在⼦组件的标签上定义属性 ⼦组件通过props来进⾏接收,可以通过数组或者对象的⽅式接收,如果⽗组件没有传递属性,⼦组件可以default来设置默认值 父传子的使用场景 封装列表的时候 把数据传到子组件渲染
2.⼦传⽗
⼦组件通过this.$emit("⾃定义的事件的名字",要传给⽗组件的数据), ⽗组件通过⼦组件的标签监听⾃定义的时间,最后在父组件接收使用就可以了 子传父的使用场景：在子组件中有删除等方法的时候要在子组件把下标传到父组件操作数据
3.兄弟组件通信
通过中央事件总线,我们也称之为eventBus,
在main.js定义一个空的vue实例并且挂载在原型上,通过$emit传数据,在要接收的子组件的created钩子函数下通过$on接收
4.vuex
把公共数据存在vuex里这样就能实现组件通信
5.本地存储
把要传递的数据存在本地存储里,再要接收的组件接收,也能实现组件通信
6.v-model
v-model是一个语法糖 是:value和@input的合写 所以说能实现组件通信
7.$attr和$listener
主要是祖孙之间传值 父组件下面有子组件a 子组件a下面又有 子组件b 在父组件里还是用自定义属性和自定义事件传 在子组件a下面绑定v-bind="$attrs" v-on="$listeners" 在子组件b下面通过$attrs 拿数据 通过 $emit 调用方法
8.provide 和 inject
不管嵌套了几层都能拿到数据 把数据定义在 provide 里 在子组件通过 inject 拿到数据 缺点是不响应
9.children 和 parent
在子组件里通过$parent 拿到父组件的数据和方法 在父组件里通过$children 拿到子组件的数据和方法
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
