vue 中兄弟组件传值的方法有:1. 通过属性传递;2. 通过事件总线传递;3. 通过 vuex 存储。
Vue 中兄弟组件传值
在 Vue 应用中,兄弟组件之间需要传递数据时,可以使用以下方法:
1. 通过属性传递
在父组件中,为需要传递数据的子组件定义一个属性。子组件通过接收这个属性并使用它。
例如:
// 父组件
<template><mycomponent my-data="foo"></mycomponent></template><script>
export default {
data() {
return {
myData: 'foo',
};
},
};
</script>
// 子组件
<template><div>{{ myData }}</div>
</template><script>
export default {
props: ['myData'],
};
</script>
2. 通过事件总线传递
Vue 提供了一个全局的事件总线,可以用来在组件之间传递数据。
首先,创建一个事件总线实例:
import Vue from '<a style="color:#f60; text-decoration:underline;" href="https://www.php.cn/zt/15721.html" target="_blank">vue</a>';
const eventBus = new Vue();
然后,在需要发送数据的组件中发出一个事件:
eventBus.$emit('myEvent', { myData: 'foo' });
在需要接收数据的组件中,监听这个事件并处理数据:
eventBus.$on('myEvent', function(data) {
// 使用 data.myData
});
3. 通过 Vuex 存储
Vuex 是一个状态管理库,可以方便地在 Vue 组件之间共享数据。
在 Vuex store 中创建需要的状态:
import Vuex from 'vuex';
const store = new Vuex.Store({
state: {
myData: 'foo',
},
});
然后,在组件中通过 mapState 和 mapActions 访问和修改 store 中的数据:
// 使用 mapState 获取状态
computed: {
...mapState([
'myData',
]),
},
// 使用 mapActions 修改状态
methods: {
...mapActions([
'setMyData',
]),
setMyData(newValue) {
this.$store.commit('setMyData', newValue);
},
},