vue3中兄弟之间的传值

在Vue 3中，兄弟组件间的通信通常通过props、自定义事件（$emit/$on）以及Vuex状态管理库来实现。以下是几种常见的方法：

1. **Props**（属性传递）：父组件可以将数据作为prop传递给子组件。如果需要双向数据绑定，可以考虑使用v-model和sync修饰符。

// 父组件
<template>
  <div>
    <child-component :value="parentValue" @input="handleInput"></child-component>
  </div>
</template>

<script>
export default {
  props: ['parentValue'],
  methods: {
    handleInput(newVal) {
      this.parentValue = newVal;
    }
  }
}
</script>

2. **自定义事件**：子组件触发自定义事件，父组件监听并处理这个事件。

// 子组件
<template>
  <button @click="$emit('update-value', newValue)">更新值</button>
</template>

<script>
export default {
  emits: ['update-value'],
}
</script>

3. **Vuex store**：当涉及复杂的业务逻辑和状态管理时，可以使用 Vuex 状态管理库，所有兄弟组件共享同一个 store 对象。

// Store.js
import { createStore } from 'vuex';

const store = createStore({
  state: {
    sharedValue: ''
  },
  mutations: {
    updateSharedValue(state, value) {
      state.sharedValue = value;
    }
  },
  actions: {
    updateValue({ commit }, value) {
      commit('updateSharedValue', value);
    }
  }
});

export default store;

// 使用
<template>
  <button @click="store.dispatch('updateValue', newValue)">更新值</button>
</template>
<script>
import { mapActions } from 'vuex';
export default {
  computed: {
    ...mapActions(['updateValue'])
  }
}
</script>