在Vue中,父子组件之间的传值是非常常见的。但是,在一些特殊的情况下,我们需要在非父子组件之间传递数据。这时,我们可以使用一些其他的方法来实现非父子组件传值。
. 使用事件总线
事件总线是Vue中常用的一种非父子组件传值的方式。可以通过创建一个Vue实例作为事件总线,然后在需要传值的组件中$emit一个事件,在接收数据的组件中$on这个事件来接收数据。
以下是一个简单的示例:
在事件总线中创建一个Vue实例:
```
// eventBus.js
import Vue from &;vue&;
export const eventBus = new Vue()
```
在需要传值的组件中$emit一个事件:
```
// ComponentA.vue
import { eventBus } from &;./eventBus.js&;
export default {
methods: {
sendData() {
eventBus.$emit(&;data&;, &;hello world&;)
}
}
}
```
在接收数据的组件中$on这个事件来接收数据:
```
// ComponentB.vue
import { eventBus } from &;./eventBus.js&;
export default {
data() {
return {
message: &;&;
}
},
created() {
eventBus.$on(&;data&;, message => {
this.message = message
})
}
}
```
. 使用Vuex
Vuex是Vue官方提供的一种状态管理库,它可以用来管理全局共享的状态。我们可以在Vuex中定义一个全局变量来存储需要传递的数据,在需要传值的组件中$dispatch一个action,然后在接收数据的组件中$watch这个全局变量来接收数据。
以下是一个简单的示例:
在Vuex中定义一个全局变量:
```
// store.js
import Vue from &;vue&;
import Vuex from &;vuex&;
Vue.use(Vuex)
export default new Vuex.Store({
state: {
message: &;&;
},
mutations: {
setMessage(state, message) {
state.message = message
}
}
})
```
在需要传值的组件中$dispatch一个action:
```
// ComponentA.vue
import store from &;./store.js&;
export default {
methods: {
sendData() {
store.commit(&;setMessage&;, &;hello world&;)
}
}
}
```
在接收数据的组件中$watch这个全局变量来接收数据:
```
// ComponentB.vue
import store from &;./store.js&;
export default {
data() {
return {
message: &;&;
}
},
created() {
this.$watch(() => store.state.message, message => {
this.message = message
})
}
}
```
. 使用provide/inject
Vue提供了provide/inject这种API来实现非父子组件传值。它可以在祖先组件中provide一个数据,然后在后代组件中inject这个数据来使用。
以下是一个简单的示例:
在祖先组件中provide一个数据:
```
// Ancestor.vue
export default {
provide() {
return {
message: &;hello world&;
}
}
}
```
在后代组件中inject这个数据来使用:
```
// Descendant.vue
export default {
inject: [&;message&;],
mounted() {
console.log(this.message) // hello world
}
}
```
以上就是Vue中非父子组件传值的三种方式:事件总线、Vuex和provide/inject。每种方式都有其适用的场景,我们可以根据具体情况选择合适的方式来实现非父子组件传值。