1.父传子
在子组件的标签上定义属性,子组件通过props来进行接收,可以通过数组或对象的方式接收,如果父组件没有传递属性,子组件可以用defalut来设置默认值父传子的使用场景 封装列表的时候 把数据传到子组件上渲染
2.子传父
子组件通过this.$emit(自定义事件的名字,要传给父组件的数据) 父组件通过子组件的标签监听自定义的时间,最后在父组件接收使用就可以了。
子传父的应用场景:在子组件中有删除等方法的时候要在子组件把下标传到父组件操作数据
3.兄弟组件通信
通过中央事件总线,我们也称之为eventBus。
在main.js定义一个空的vue实例并且挂载到原型上,通过
e
m
i
t
传数据,在要接收的子组件的
c
r
e
a
t
e
d
钩子函数下通过
emit传数据,在要接收的子组件的created钩子函数下通过
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 拿到子组件的数据和方法