vue3常用的组件间通信

在Vue 3中，组件间的通信是一个重要的概念。组件通常是相互独立的，但我们经常需要让它们之间进行数据传递和信息交流。Vue 3提供了多种方法来实现这样的通信，其中包括父子组件通信、兄弟组件通信以及使用Vuex等全局状态管理工具。以下是一些常用的组件间通信方式及其示例。

1. 父子组件通信

父子组件通信主要通过props和$emit进行。

(1) 通过 Props 向子组件传递数据

父组件可以使用props向子组件传递数据，子组件通过this.props接收。

<!-- ParentComponent.vue -->
<template>
  <div>
    <ChildComponent :message="parentMessage" />
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: { ChildComponent },
  data() {
    return {
      parentMessage: 'Hello from Parent!'
    };
  }
};
</script>

<!-- ChildComponent.vue -->
<template>
  <div>
    <h1>{{ message }}</h1>
  </div>
</template>

<script>
export default {
  props: {
    message: String
  }
};
</script>

(2) 通过 $emit 发射事件

子组件向父组件发送消息时，可以使用$emit来发射事件。

<!-- ChildComponent.vue -->
<template>
  <div>
    <button @click="sendMessage">Send Message to Parent</button>
  </div>
</template>

<script>
export default {
  methods: {
    sendMessage() {
      this.$emit('childMessage', 'Hello from Child!');
    }
  }
};
</script>

<!-- ParentComponent.vue -->
<template>
  <div>
    <ChildComponent @childMessage="receiveMessage" />
    <p>Message from child: {{ childMessage }}</p>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: { ChildComponent },
  data() {
    return {
      childMessage: ''
    };
  },
  methods: {
    receiveMessage(message) {
      this.childMessage = message;
    }
  }
};
</script>

2. 兄弟组件通信

兄弟组件之间的通信更为复杂，通常需要借助父组件来达成。这里的基本思路是由一个共同的父组件来协调两个子组件之间的消息传递。

<!-- ParentComponent.vue -->
<template>
  <div>
    <ChildA @messageToB="sendMessageToB" />
    <ChildB :incomingMessage="messageFromA" />
  </div>
</template>

<script>
import ChildA from './ChildA.vue';
import ChildB from './ChildB.vue';

export default {
  components: { ChildA, ChildB },
  data() {
    return {
      messageFromA: ''
    };
  },
  methods: {
    sendMessageToB(message) {
      this.messageFromA = message;
    }
  }
};
</script>

<!-- ChildA.vue -->
<template>
  <div>
    <button @click="sendMessage">Send Message to Child B</button>
  </div>
</template>

<script>
export default {
  methods: {
    sendMessage() {
      this.$emit('messageToB', 'Hello from Child A!');
    }
  }
};
</script>

<!-- ChildB.vue -->
<template>
  <div>
    <h1>{{ incomingMessage }}</h1>
  </div>
</template>

<script>
export default {
  props: {
    incomingMessage: String
  }
};
</script>

3. 使用全局状态管理 Vuex

当应用中组件较多，或组件层级较深时，使用Vuex进行状态管理是一个更理想的选择。这样，无论组件处于何层级，都可以方便地访问和修改状态。

首先安装Vuex（如果还没有安装）：

npm install vuex@next

然后创建一个简单的Vuex store：

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

const store = createStore({
  state() {
    return {
      message: ''
    };
  },
  mutations: {
    setMessage(state, message) {
      state.message = message;
    }
  },
  actions: {
    updateMessage({ commit }, message) {
      commit('setMessage', message);
    }
  },
  getters: {
    getMessage(state) {
      return state.message;
    }
  }
});

export default store;

在根组件中引入store：

<!-- main.js -->
import { createApp } from 'vue';
import App from './App.vue';
import store from './store';

createApp(App).use(store).mount('#app');

然后在任意组件中使用Vuex：

<!-- SomeComponent.vue -->
<template>
  <div>
    <input v-model="newMessage" placeholder="Type a message">
    <button @click="sendMessage">Send Message</button>
    <p>Message from Store: {{ message }}</p>
  </div>
</template>

<script>
import { mapGetters, mapActions } from 'vuex';

export default {
  data() {
    return {
      newMessage: ''
    };
  },
  computed: {
    ...mapGetters(['getMessage'])
  },
  methods: {
    ...mapActions(['updateMessage']),
    sendMessage() {
      this.updateMessage(this.newMessage);
    }
  }
};
</script>

总结

通过上述几种方式，您可以在Vue 3中实现组件之间的灵活通信。选择合适的方法主要取决于您的应用复杂度和组件层级结构。如果组件数目较少，使用props和$emit较为简单，如组件数目较多，建议使用Vuex进行全局状态管理。理解这些不同的通信方式，将有助于您更好地构建复杂的Vue应用。