卓越飞翔博客卓越飞翔博客

卓越飞翔 - 您值得收藏的技术分享站
技术文章55153本站已运行402

vue中兄弟组件如何传值

vue 中兄弟组件传值的方法有:1. 通过属性传递;2. 通过事件总线传递;3. 通过 vuex 存储。

vue中兄弟组件如何传值

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);
  },
},
卓越飞翔博客
上一篇: 使用 PHP 与 MySQL 交互时有哪些最佳实践?
下一篇: 返回列表
留言与评论(共有 0 条评论)
   
验证码:
隐藏边栏