Vue中非父子组件间的通信传值
5星
- 浏览量: 0
- 大小:None
- 文件类型：PDF
简介：
简介：本文讲解了在Vue项目开发中如何实现非父子组件间的数据传递方法，包括事件总线、Vuex状态管理等方式。
在Vue.js框架中，组件是构建用户界面的基本单元，并且可以独立地管理和更新各自的视图。然而，在实际应用中我们常常需要非父子组件之间进行通信。由于Vue的单向数据流原则，直接修改父组件的值在子组件中不被推荐，因此需要采取其他方法来实现这种通信。
一种常用的方法是使用“Bus”（或称为事件总线、发布订阅模式或观察者模式）。首先，在Vue实例原型链上添加一个全局属性`bus`，这样所有组件都能访问到它：
```javascript
Vue.prototype.bus = new Vue()
```
接下来定义名为 `child` 的组件。这个组件接收一个名为 `content` 的属性，并将其复制到自身的 `copyContent` 数据中。由于子组件不能直接修改父组件的值，所以将 `content` 作为只读属性处理：
```javascript
Vue.component(child, {
props: {
content: String
},
data() {
return {
copyContent: this.content // 注意这里会报错，因为this在定义props时不可用，需要改为默认值或计算属性来解决。
}
},
template:
{{copyContent}}
,
methods: {
handleClick() {
this.bus.$emit(change, this.copyContent)
}
},
mounted() {
var self = this;
this.bus.$on(change, function(msg) {
self.copyContent = msg;
})
}
})
```
在这个例子中，`child` 组件有一个 `handleClick` 方法。当这个方法被调用时，它会通过 `bus` 触发一个名为 `change` 的事件，并传递当前的 `copyContent` 值。
同时，在组件挂载后（即在生命周期钩子函数 mounted 中），我们注册了一个监听器来接收由 `bus` 发出的 `change` 事件。一旦接收到该事件，就会更新组件内部的数据属性值 `copyContent` 的内容。
当有多个这样的组件时，它们都可以通过相同的全局事件总线进行通信。例如如果有两个 `child` 组件，在每个挂载阶段都会监听同样的 `change` 事件；因此每次点击触发的事件会被所有注册了该事件的组件接收到并相应地更新其状态。
总结来说，Vue 的 Bus 机制是一种实用的方法，它允许我们在不依赖于父子关系或 Vuex 等复杂的状态管理库的情况下实现非父子组件间的通信。通过创建一个全局的事件总线，我们可以将事件和数据广播到任何需要的地方，极大地增强了组件的灵活性与可复用性。
全部评论 (0)
还没有任何评论哟~
