©2020-2024 ioDraw All rights reserved,
Privacy Policy
前言
在vue项目中，封装组件，涉及到父子组件的传值，本文主要讲解父子组件之间传值的方法。
一、props / $emit
适用于父子组件通信，单向数据流，这种方法是 vue 组件的基础。
二、ref 与 $parent / $children
适用于父子组件通信。
ref 如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果在子组件上，引用就指向组件实例。
$parent / $children 访问父 / 子实例
三、EventBus ($emit / $on)
适用于父子、隔代、兄弟组件通信。
这种方法通过一个空的 Vue 实例作为中央事件总线（事件中心），用它来触发事件和监听事件，从而实现任何组件间的通信。
四、$attrs / $listeners
适用于隔代组件通信。
$attrs：包含了父作用域中不被 props 所识别（且获取）的特性绑定（class 和 style 除外）。当一个组件没有声明任何 props
时，这里会包含所有父作用域的绑定（class 和 style 除外），并且可以通过 v-bind="attrs" 传入内部组件。
$listeners：包含了父作用域中的（不含 .native 修饰器的） v-on 事件监听器，它可以通过 v-on="listeners" 传入内部组件。
五、provide / inject
适用于隔代组件通信。
祖先组件中通过 provide 来提供变量，然后在子孙组件中通过 inject 来注入变量。
provide / inject API 主要解决了跨级组件间的通信问题。
provide 和 inject 主要为高阶插件/组件库提供用例。并不推荐直接用于应用程序代码中。 -- vue文档
正如文档所说， provide 和 inject 用来开发组件库很有用，因为一般开发组件库不会引类似于 Vuex 这样的三方依赖，就只有用 Vue
本身提供的 provide 和 inject 了。
// A.vue export default { provide: { name: 'lin' } } // B.vue export default {
inject: ['name'], mounted () { console.log(this.name); // lin } }
六、Vuex
适用于父子、隔代、兄弟组件通信。
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。每一个 Vuex 应用的核心就是 store （仓库）。
store 基本上就是一个容器，它包含着你的应用中大部分的状态 (state) 。
Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候，若 store
中的状态发生变化，那么相应的组件也会相应地得到高效更新。改变 store
中的状态的唯一途径就是显式地提交（commit）mutation。这样使得我们可以方便地追踪每一个状态的变化。