vue 父子组件间通信


前言

在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。这样使得我们可以方便地追踪每一个状态的变化。

技术
下载桌面版
GitHub
Microsoft Store
SourceForge
Gitee
百度网盘（提取码：draw）
云服务器优惠
华为云优惠券
京东云优惠券
腾讯云优惠券
阿里云优惠券
Vultr优惠券
站点信息
问题反馈
邮箱：[email protected]
吐槽一下
QQ群：766591547
关注微信
©2020-2025 ioDraw All rights reserved, Privacy Policy