vue 组件间通信总结

父-子组件通信

1. Props

此处不区分是否加引号，若不bind，皆作字符串处理，否则作为表达式处理

若传入对象，则子组件上的该对象与父组件中的该对象指向同一个地址，如果希望对传入的对象进行修改且不影响父组件，则需要看情况对其进行深、浅拷贝

若传入的属性在父组件中会发生变化，则将其放置在子组件的computed或watch(deep:true)中以检测变化

若要根据该属性去修改以此为基础的其他属性，则使用computed的get/set或watch(deep:true)
ps: 也可以直接在父组件中获取子组件的实例从而再调用子组件的方法、访问子组件的属性等（不常用）

2. v-bind="$attrs"，v-on="$listeners"，特别适合于封装高阶组件时向子组件传值及绑定事件

$attrs 包含了父作用域中不作为 prop 被识别 (且获取) 的特性绑定 (class 和 style 除外)。

$listeners 包含了父作用域中的 (不含 .native 修饰器的) v-on 事件监听器

<template>
    <el-button v-bind="$attrs" v-on="$listeners"></el-button>
</template>

3. $children、$refs...(not suggest)

 

子-父组件通信

1. 通过给子组件绑定事件，父组件监听子组件事件或$emit 触发的自定义事件，从而获取子组件传入的实参数据

常用语法糖：.sync

<comp :value.sync="value"></comp>

等同于

<comp :value="ok" @update:value="val => value = val"></comp>

2. 通过$parent、$root...(not suggest)

 

兄弟组件通信

1. 借助公用的一个vue实例的事件来传递数据（Bus通信），即$on绑定事件，再使用$emit触发该事件

2. 通过路由携带的params传数据

3. 使用Vuex，较复杂，建议庞大的系统再使用

 

祖先组件与子孙组件通信

1. Bus通信

2. 通过依赖注入，即provide、inject

3. Vuex

 

欢迎关注、点赞