1 props 和 $emit

(1) 通过 props 将数据在组件树中进行⾃上⽽下的传递

export default { // props: ['money'] props: { money: { type: Number, default: 1 }, obj: { type: Object, default: () => { return { name: 'zs', age: 18 } } } } }

(2) 通过 $emit 和 @ 来作信息的向上传递。

this.$emit('add-action', 参数1, 参数2, ...)

2 eventBus事件总线

父组件中, $children 返回的是一个组件集合，如果你能清楚的知道子组件的顺序，你也可以使用下标来操作

// 父组件中

通过添加 ref 和 $refs 配合, 也可以很方便的获取子组件, 访问调用子组件的属性或方法

// 父组件中

3 provide inject

成对出现： provide和inject是成对出现的作用：用于父组件向子孙组件传递数据

export default { provide () { return { value: this.value // 共享给子孙组件的数据 } }, data () { return { value: '父组件的数据', money: 100 } } }

export default { inject: ['value'], props: { ... } }

Vue组件之间如何进行通信？

1 props 和 $emit

2 eventBus事件总线

3 provide inject