Vue 组件之间的通信方式详解_Vue.js

在 vue.js 中，组件是构建应用程序的基本单位。然而，当你的应用程序变得复杂时，组件之间的通信变得至关重要。本文将介绍几种 vue 组件之间通信的方式，帮助你更好地管理和组织代码。

父子组件通信

父组件可以通过 props 向子组件传递数据，子组件则可以通过 $emit 向父组件发送事件。

通过 props 传递数据

父组件通过 props 向子组件传递数据：

<!-- 父组件 -->
<template>
  <div>
    <child-component :message="parentmessage"></child-component>
  </div>
</template>
<script>
import childcomponent from './childcomponent.vue';
export default {
  components: {
    childcomponent
  },
  data() {
    return {
      parentmessage: 'hello from parent!'
    };
  }
};
</script>

子组件通过 props 接收数据：

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

通过 $emit 发送事件

子组件通过 $emit 向父组件发送事件：

<!-- 子组件 -->
<template>
  <div>
    <button @click="sendmessage">send message</button>
  </div>
</template>
<script>
export default {
  methods: {
    sendmessage() {
      this.$emit('message-sent', 'hello from child!');
    }
  }
};
</script>

父组件监听子组件的事件：

<!-- 父组件 -->
<template>
  <div>
    <child-component @message-sent="handlemessage"></child-component>
  </div>
</template>
<script>
import childcomponent from './childcomponent.vue';
export default {
  components: {
    childcomponent
  },
  methods: {
    handlemessage(message) {
      console.log(message);  // 输出 'hello from child!'
    }
  }
};
</script>

兄弟组件通信

兄弟组件之间通常通过事件总线（event bus）或 vuex 状态管理来实现通信。

使用事件总线

创建一个事件总线：

// event-bus.js
import vue from 'vue';
export const eventbus = new vue();

在兄弟组件中使用事件总线：

<!-- 组件 a -->
<template>
  <div>
    <button @click="sendmessage">send message</button>
  </div>
</template>
<script>
import { eventbus } from './event-bus.js';
export default {
  methods: {
    sendmessage() {
      eventbus.$emit('message-sent', 'hello from component a!');
    }
  }
};
</script>
<!-- 组件 b -->
<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>
<script>
import { eventbus } from './event-bus.js';
export default {
  data() {
    return {
      message: ''
    };
  },
  created() {
    eventbus.$on('message-sent', (message) => {
      this.message = message;
    });
  }
};
</script>

使用 vuex

使用 vuex 是管理应用程序状态的最佳实践。首先安装并配置 vuex：

// store.js
import vue from 'vue';
import vuex from 'vuex';
vue.use(vuex);
export default new vuex.store({
  state: {
    message: ''
  },
  mutations: {
    setmessage(state, message) {
      state.message = message;
    }
  },
  actions: {
    updatemessage({ commit }, message) {
      commit('setmessage', message);
    }
  }
});

在组件中使用 vuex：

<!-- 组件 a -->
<template>
  <div>
    <button @click="sendmessage">send message</button>
  </div>
</template>
<script>
export default {
  methods: {
    sendmessage() {
      this.$store.dispatch('updatemessage', 'hello from component a!');
    }
  }
};
</script>
<!-- 组件 b -->
<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>
<script>
export default {
  computed: {
    message() {
      return this.$store.state.message;
    }
  }
};
</script>