vue组件通信的几种方式

 

组件间通信场景大致分为以下几种

1. 父组件向直接子组件传值。
2. 子组件向直接父组件传值。
3. 组件上下超过1级传值。

我们先来说第一种

1 父组件向直接子组件传值。

• 方法1：通过props属性进行传值，props 可以是数组或对象，用于接收来自父组件的数据，官网使用说明。总结：子组件声明props,定义接受对象（可以指定接受对象的类型以及默认值），父组件通过v-bind:的方式进行传值。例子：

• 方法2：在父组件内访问子组件实例调用子组件内定义的方法顺带传参，官网访问子组件方法说明。例子：

2 子组件向直接父组件传值。

•     通过子组件调用回调方法传参，语法：this.$emit('方法名字',参数值)。父组件监听子组件定义的“方法”，@"方法名字"=“本地方法名”。例子：

•   利用$parent方式，官网说明。

3 组件上下超过1级传值。

•  利用$parent、ref等方法。缺点容易乱，多层级不方便查找。
• 利用vuex。优点：官方推荐方法。缺点：新的知识点需要系统了解学习。vuex官网
• 利用provide/inject。优点：provide/inject是解决组件之间的通信问题的利器，不受层级结构的限制。（此方法提供的属性不是动态绑定的，非双向绑定）官网介绍。例子：