ZVVQ代理分享网

如何在非父子组件之间传递数据?

作者:zvvq博客网
导读在Vue中,父子组件之间的传值是非常常见的。但是,在一些特殊的情况下,我们需要在非父子组件之间传递数据。这时,我们可以使用一些其他的方法来实现非父子组件传值。 1. 使用事

在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。每种方式都有其适用的场景,我们可以根据具体情况选择合适的方式来实现非父子组件传值。