Vue总结篇之组件通信

目录

• 父子组件通信
  • props
  • events（$emit、$on）
  • ref、$parent、$children
• 非父子组件通信
  • $attrs & $listeners (祖孙通信)
  • provide & inject (祖孙通信)
• 全局通信
  • eventBus(中央数据总线)
  • Vuex

父子组件通信

通过 props 向下传递，通过事件向上传递。

1. props （父子通信）
2. $emit、$on（子父通信）

//子组件
<button @click="$emit('add',c)"></button>
//父组件
<cart @add='cartAdd($event)'></cart>

注意：派送和监听事件都是同一个主体，即谁派送谁就监听

3. ref、$parent、$children
   使用ref时需要注意

• $refs 是作为渲染结果被创建的，所以在初始渲染的时候它还不存在，此时无法无法访问。
• $refs 不是响应式的，只能拿到获取它的那一刻子组件实例的状态，所以要避免在模板和计算属性中使用它。

非父子组件通信

1. $attrs & $listeners （适用于深层嵌套组件 3介）

某些场景下，我们只需要将上层属性层层传递到子孙组件时，如：

<parent :message="message" />
    <child :message="message" />
        <grand-child :message="message" />

• $attrs 会包含父组件中没有被 prop 接收的所有属性（不包含class 和 style 属性），可以通过 v-bind="$attrs" 直接将这些属性传入内部组件。
• $listeners 会包含所有父组件中的 v-on 事件监听器 (不包含 .native 修饰器的) ，可以通过 v-on="$listeners" 传入内部组件。

2. provide & inject

// 父组件
provide(){
    return {
        form: this
    }
}

// 子组件
inject: ['form']

全局通信

1. eventBus（中央数据总线）

Vue.prototype.$bus = new Vue()
// a组件
this.$bus.$emit('message')
// b组件
this.$bus.$on('message')

2. vuex
   集中式存储管理应用的所有组件的状态，适用于中大型项目

组件通信总结：

1. props & $emit (适用父子组件通信)
2. $attrs、inheritAttrs 和$listeners (适用深层嵌套组件（3介）)
3. 自定义中央数据总线（如$bus）（适用跨级组件间通信，缺点是多人合作时难以维护）
4. provide & inject (适用父子或父孙级组件， 缺点是只能做简单的数据共享，对数据的操作和获取不可控)
5. vuex （适用大型项目）

来源：CSDN

作者：柳絮才媛

链接：https://blog.csdn.net/yuan_me_da/article/details/104450580