Vue.js 组件间事件通信的 3 种方式详解

在 Vue.js 中，组件是构成 UI 界面的基本模块。在组件化开发中，不同组件之间的通信无疑是十分重要的。Vue.js 提供了多种组件通信的方式，比如 props，$emit 事件和 Vuex 等。本文主要介绍 Vue.js 中组件间事件通信的 3 种方式，并详细说明它们的使用方式及优缺点。

1. Props

在 Vue.js 中，通过 props 将数据从父组件传递到子组件，这也是实现组件通信的最基本方式之一。子组件通过 props 接收并使用数据，然后将数据渲染到 UI 界面上。当父组件的数据发生变化时，props 也会更新数据并重新渲染。

优点：

• props 机制简单，易于理解和实现。
• 传递数据双向绑定，避免了跨组件数据同步问题。
• 可以使用自定义校验器验证传递的数据。

缺点：

• 手动将数据从父组件传递到子组件，对于多层级嵌套组件的情况，传递数据相对繁琐。
• 对于子组件修改了父组件传递的数据，需要使用事件通知父组件更新。

示例代码：

// www.javascriptcn.com code example
<!-- 父组件 -->
<template>
  <div>
    <child-component :message="msg"></child-component>
  </div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
  components: { ChildComponent },
  data() {
    return {
      msg: 'Hello Vue.js'
    };
  }
};
</script>

<!-- 子组件 -->
<template>
  <div>{{ message }}</div>
</template>
<script>
export default {
  props: ['message']
};
</script>

2. $emit 事件

Vue.js 提供了 $emit 方法，可以在子组件中触发一个自定义事件，并向父组件通知事件。父组件可以通过监听子组件触发的事件，取得子组件传递的数据并更新自己的状态。通过这个方式，实现子组件向父组件传递数据的效果。

优点：

• $emit 机制简单，易于理解和实现。
• 传递数据双向绑定，避免了跨组件数据同步问题。
• 可以通过事件冒泡，实现多层级嵌套组件之间的通信。

缺点：

• 需要在父组件中通过 $on 方法监听子组件触发的事件，可能会导致组件之间的耦合度增加。

示例代码：

// www.javascriptcn.com code example
<!-- 父组件 -->
<template>
  <div>
    <child-component @changeMsg="handleMsgChange"></child-component>
  </div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
  components: { ChildComponent },
  data() {
    return {
      msg: 'Hello Vue.js'
    };
  },
  methods: {
    handleMsgChange(newMsg) {
      this.msg = newMsg;
    }
  }
};
</script>

<!-- 子组件 -->
<template>
  <button @click="changeMsg">Change Message</button>
</template>
<script>
export default {
  methods: {
    changeMsg() {
      this.$emit('changeMsg', 'Hello World');
    }
  }
};
</script>

3. Vuex

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它通过 store 统一管理应用程序的状态，并提供了一些 API 让我们从组件中实现状态的修改和触发。

使用 Vuex 之后，我们可以通过 store 中的 state 状态来实现任意组件之间的通信，而无需使用 props 或 $emit 等方式。

优点：

• 通过 store 统一管理应用程序的状态，避免了组件之间状态分散的问题。
• 可以使用丰富的 API 实现状态的修改和触发。
• 可以通过插件形式扩展 store，实现更加复杂的状态管理需求。

缺点：

• 代码复杂度增加，需要学习 Vuex 的使用和工作原理。

示例代码：

// www.javascriptcn.com code example
<!-- 加载 Vuex -->
<script>
import Vuex from 'vuex';
import Vue from 'vue';
Vue.use(Vuex);
</script>

<!-- 创建 store 实例 -->
<script>
export default new Vuex.Store({
  state: {
    msg: 'Hello Vue.js'
  },
  mutations: {
    changeMsg(state, newMsg) {
      state.msg = newMsg;
    }
  },
  actions: {
    changeMsg(context, newMsg) {
      context.commit('changeMsg', newMsg);
    }
  },
  getters: {
    msgLength(state) {
      return state.msg.length;
    }
  }
});
</script>

<!-- 父组件 -->
<template>
  <div>{{ msg }}</div>
  <div>{{ msgLength }}</div>
  <button @click="changeMsg">Change Message</button>
</template>
<script>
import store from './store';
export default {
  computed: {
    msg() {
      return store.state.msg;
    },
    msgLength() {
      return store.getters.msgLength;
    }
  },
  methods: {
    changeMsg() {
      store.dispatch('changeMsg', 'Hello World');
    }
  }
};
</script>

结语

本文通过介绍 Props、$emit 事件和 Vuex 三种方式实现 Vue.js 组件间事件通信的方法，希望读者可以在实际开发中灵活运用。对于组件通信需求不是很复杂的项目中，可以使用 Props 和 $emit 等方式。对于较为复杂的应用程序，可以使用 Vuex 等状态管理工具来实现组件间的通信。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67d6ae43a941bf7134c7f107