vue组件之间通信的方式

1. props/$emit

最常见的方式,父组件通过props的方式向子组件传递数据,子组件通过$emit 提交事件向父组件通信。

2. $children/$parent

通过$parent和$children就可以访问组件的实例,其中 $children是数组,$parent是对象

3. ref/$refs

this.$refs.xxx可以获取组件实例

4. eventBus

通过中央事件总线的方式,一个组件$emit,另外一个组件$on

5. vuex

项目复杂采用它

6. localStorage/sessionStorage

比较简单但是不易维护

7. provide/reject

简单来说就是父组件中通过provide来提供变量, 然后子组件中通过inject来注入变量。
注意: 这里不论子组件嵌套有多深, 只要调用了inject 那么就可以注入provide中的数据,而不局限于只能从当前父组件的props属性中获取数据

8. inheritAttrs/$attrs/$listeners

$attrs:包含了父作用域中不被 prop 所识别 (且获取) 的特性绑定 (class 和 style 除外)。当一个组件没有声明任何 prop 时,这里会包含所有父作用域的绑定 (class 和 style 除外),并且可以通过 v-bind="$attrs" 传入内部组件。通常配合 inheritAttrs 选项一起使用。

$listeners:包含了父作用域中的 (不含 .native 修饰器的) v-on 事件监听器。它可以通过 v-on="$listeners" 传入内部组件

你可能感兴趣的:(vue)