vue兄弟组件如何传值掘金

在Vue.js中，兄弟组件之间的传值通常可以通过以下几种方法来实现：1、使用父组件、2、使用事件总线、3、使用Vuex。其中，使用父组件是最常见且简单的方法。具体来说，可以通过父组件作为中介，将数据从一个子组件传递到另一个子组件。下面我们详细描述这种方法。

通过父组件实现兄弟组件之间的传值，首先需要在父组件中定义一个状态或属性，然后通过props将其传递给子组件。同时，子组件可以通过事件将数据传递回父组件。父组件接收到数据后，再通过props将数据传递给另一个子组件。

一、使用父组件

1. 步骤一：在父组件中定义状态或属性
   • 在父组件的data中定义一个共享的状态或属性。
2. 步骤二：通过props将数据传递给子组件
   • 父组件通过props将状态或属性传递给第一个子组件。
3. 步骤三：子组件通过事件将数据传递回父组件
   • 第一个子组件通过$emit触发事件，并将数据作为参数传递回父组件。
4. 步骤四：父组件接收数据并更新状态
   • 父组件在事件处理函数中更新状态或属性。
5. 步骤五：父组件通过props将更新的数据传递给另一个子组件
   • 父组件通过props将更新后的数据传递给第二个子组件。

示例代码：

<!-- 父组件 -->

<template>
  <div>
    <child-one :sharedData="sharedData" @updateData="updateSharedData"></child-one>
    <child-two :sharedData="sharedData"></child-two>
  </div>
</template>
<script>
export default {
  data() {
    return {
      sharedData: ''
    };
  },
  methods: {
    updateSharedData(newData) {
      this.sharedData = newData;
    }
  }
};
</script>
<!-- 第一个子组件 -->
<template>
  <div>
    <input v-model="inputData" @input="updateParent" />
  </div>
</template>
<script>
export default {
  props: ['sharedData'],
  data() {
    return {
      inputData: this.sharedData
    };
  },
  methods: {
    updateParent() {
      this.$emit('updateData', this.inputData);
    }
  }
};
</script>
<!-- 第二个子组件 -->
<template>
  <div>
    <p>{{ sharedData }}</p>
  </div>
</template>
<script>
export default {
  props: ['sharedData']
};
</script>

二、使用事件总线

1. 步骤一：创建事件总线
   • 创建一个新的Vue实例作为事件总线。
2. 步骤二：在第一个子组件中通过事件总线发送数据
   • 第一个子组件通过事件总线发送数据。
3. 步骤三：在第二个子组件中通过事件总线接收数据
   • 第二个子组件通过事件总线监听数据变化。

示例代码：

// eventBus.js

import Vue from 'vue';
export const EventBus = new Vue();

<!-- 第一个子组件 -->

<template>
  <div>
    <input v-model="inputData" @input="sendData" />
  </div>
</template>
<script>
import { EventBus } from './eventBus';
export default {
  data() {
    return {
      inputData: ''
    };
  },
  methods: {
    sendData() {
      EventBus.$emit('dataChanged', this.inputData);
    }
  }
};
</script>
<!-- 第二个子组件 -->
<template>
  <div>
    <p>{{ receivedData }}</p>
  </div>
</template>
<script>
import { EventBus } from './eventBus';
export default {
  data() {
    return {
      receivedData: ''
    };
  },
  created() {
    EventBus.$on('dataChanged', (newData) => {
      this.receivedData = newData;
    });
  }
};
</script>

三、使用Vuex

1. 步骤一：安装和配置Vuex
   • 安装Vuex并在Vue应用中进行配置。
2. 步骤二：在Vuex状态中定义数据
   • 在Vuex的state中定义共享的数据。
3. 步骤三：创建getter和mutation
   • 创建getter来访问数据，创建mutation来更新数据。
4. 步骤四：在子组件中访问和更新数据
   • 第一个子组件通过mutation更新数据，第二个子组件通过getter访问数据。

示例代码：

// store.js

import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
export default new Vuex.Store({
  state: {
    sharedData: ''
  },
  mutations: {
    updateSharedData(state, newData) {
      state.sharedData = newData;
    }
  },
  getters: {
    sharedData: state => state.sharedData
  }
});

<!-- 第一个子组件 -->

<template>
  <div>
    <input v-model="inputData" @input="updateData" />
  </div>
</template>
<script>
import { mapMutations } from 'vuex';
export default {
  data() {
    return {
      inputData: ''
    };
  },
  methods: {
    ...mapMutations(['updateSharedData']),
    updateData() {
      this.updateSharedData(this.inputData);
    }
  }
};
</script>
<!-- 第二个子组件 -->
<template>
  <div>
    <p>{{ sharedData }}</p>
  </div>
</template>
<script>
import { mapGetters } from 'vuex';
export default {
  computed: {
    ...mapGetters(['sharedData'])
  }
};
</script>

四、对比与选择

总结与建议

综上所述，兄弟组件之间的传值可以通过父组件、事件总线和Vuex等多种方式实现。对于简单的项目，推荐使用父组件传值的方法，因为它简单且易于理解。如果项目稍微复杂一些，可以考虑使用事件总线来解耦组件之间的关系。而对于大型项目和复杂的状态管理，Vuex是一个非常好的选择。根据项目的实际情况，选择最适合的传值方式，能够提高开发效率并保证代码的可维护性。

相关问答FAQs：

1. Vue兄弟组件如何传值？

在Vue中，兄弟组件之间传值可以通过以下几种方式实现：

1. 使用Vue的事件总线：可以通过Vue的实例来创建一个事件总线，兄弟组件可以通过该事件总线来进行通信。一个组件通过$emit方法触发一个自定义事件，另一个组件通过$on方法监听该自定义事件，并在回调函数中处理传递的值。

2. 使用Vuex：Vuex是Vue的官方状态管理库，它可以用于在多个组件之间共享数据。通过在Vuex的state中定义一个共享的数据属性，在需要传值的组件中使用this.$store.commit方法来修改该属性的值，在需要接收值的组件中使用this.$store.state来获取该属性的值。

3. 使用父组件作为中介：如果两个兄弟组件都有一个共同的父组件，可以通过父组件作为中介来传递值。首先，在父组件中定义一个数据属性，然后将其通过props属性传递给子组件，子组件可以通过修改该属性的值来实现传值。

2. 如何在Vue中使用事件总线传递数据？

使用Vue的事件总线可以在兄弟组件之间传递数据。下面是一个示例：

在父组件中创建一个事件总线：

// main.js
Vue.prototype.$bus = new Vue();

在发送数据的组件中使用$emit方法触发一个自定义事件：

// Sender.vue
methods: {
  sendData() {
    this.$bus.$emit('data', 'Hello, receiver!');
  }
}

在接收数据的组件中使用$on方法监听该自定义事件，并在回调函数中处理传递的值：

// Receiver.vue
mounted() {
  this.$bus.$on('data', (data) => {
    console.log(data); // 输出：Hello, receiver!
  });
}

通过事件总线，发送数据的组件将数据通过自定义事件传递给接收数据的组件。

3. 如何在Vue中使用Vuex来传递数据？

使用Vuex可以在兄弟组件之间共享数据。以下是一个简单的示例：

首先，在main.js中创建Vuex的store：

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

const store = new Vuex.Store({
  state: {
    message: '',
  },
  mutations: {
    setMessage(state, message) {
      state.message = message;
    },
  },
});

new Vue({
  store,
  render: (h) => h(App),
}).$mount('#app');

然后，在发送数据的组件中使用this.$store.commit方法来修改共享的数据：

// Sender.vue
methods: {
  sendData() {
    this.$store.commit('setMessage', 'Hello, receiver!');
  },
},

最后，在接收数据的组件中使用this.$store.state来获取共享的数据：

// Receiver.vue
computed: {
  message() {
    return this.$store.state.message; // 输出：Hello, receiver!
  },
},

通过Vuex，发送数据的组件将数据通过commit方法修改共享的数据，接收数据的组件通过state属性来获取共享的数据。这样就实现了兄弟组件之间的数据传递。