1父传子
在父组件的子组件的标签上绑定自定义属性 在子组件中通过props["]接收
父传子的使用场景 封装列表的时候 把数据传到子组件渲染
在接收的时候 可以定义为数组 也可以定义为对象,定义为对象的话就能设置 数据类型和默认值
2子传父
在父组件的子组件的标签上绑定自定义事件 在子组件中通过$emit()调用这个事件
后面跟两个参数 第一个是事件名 第二个参数是传递的值
子传父的使用场景:在子组件中有删除等方法的时候要在子组件把下标传到父组件操作数据
3兄弟组件传值
又称中央事件总线 在main.js中兴建一个vue实例并且挂载到原型上
再通过this.$emit.bus来传递参数数据 通过在子组created this.$emit.on来接收传递的值
-
兄弟组件传值 中央事件总线 eventbus 在 main.js 定义一个空的 vue 实例并且挂载在原型上,通过$emit传数据,在要接收的子组件的created钩子函数下通过$on 接收
-
vuex 把公共数据存在 vuex 里 这样就能实现组件通信
-
本地存储 把要传递的数据存在本地存储里 在要接收的组件接收 也能实现组件通信
-
v-model v-model 是一个语法糖 是:value 和 @input 的合写 所以说能实现组件通信
-
$attr 和 $listener 主要是祖孙之间传值 父组件下面有子组件a 子组件a下面又有 子组件b 在父组件里还是用自定义属性和自定义事件传 在子组件a下面绑定v-bind="$attrs" v-on="$listeners" 在子组件b下面通过$attrs 拿数据 通过 $emit 调用方法
-
provide 和 inject 不管嵌套了几层都能拿到数据 把数据定义在 provide 里 在子组件通过 inject 拿到数据 缺点是不响应
-
children 和 parent 在子组件里通过$parent 拿到父组件的数据和方法 在父组件里通过$children 拿到子组件的数据和方法