如何在 Vue 中进行组件通信？-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_38822390/article/details/146567508

在 Vue.js 中，组件通信是一个关键的概念，因为应用的复杂性通常需要多个组件之间进行数据传递和交互。Vue 提供了多种方式来实现组件之间的通信，以下是一些常见的方法以及它们的用法。

1. 父子组件通信

1.1. Props

父组件可以通过 props 向子组件传递数据。这是最常见的通信方式之一。

示例：

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

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

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

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

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

1.2. 事件

子组件可以通过 $emit 方法向父组件发送事件，父组件可以监听这些事件并作出反应。

示例：

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

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

<!-- ParentComponent.vue -->
<template>
  <ChildComponent @messageSent="handleMessage" />
</template>

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

export default {
  components: { ChildComponent },
  methods: {
    handleMessage(msg) {
      console.log(msg);
    }
  }
};
</script>

2. 兄弟组件通信

2.1. Event Bus

在 Vue 2 中，可以使用一个中央事件总线（Event Bus）来实现兄弟组件之间的通信。你可以通过 Vue 实例作为事件总线。

示例：

// eventBus.js
import Vue from 'vue';
export const EventBus = new Vue();

然后在兄弟组件中使用它。

<!-- BrotherOne.vue -->
<template>
  <button @click="sendMessage">Send Message</button>
</template>

<script>
import { EventBus } from './eventBus';

export default {
  methods: {
    sendMessage() {
      EventBus.$emit('message', 'Hello from Brother One!');
    }
  }
};
</script>

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

<script>
import { EventBus } from './eventBus';

export default {
  data() {
    return {
      message: ''
    };
  },
  created() {
    EventBus.$on('message', (msg) => {
      this.message = msg;
    });
  },
  beforeDestroy() {
    EventBus.$off('message');
  }
};
</script>

2.2. Vuex

对于更复杂的应用，推荐使用 Vuex 进行状态管理。Vuex 是一个专为 Vue.js 应用程序开发的状态管理库，它可以让你更轻松地在组件之间共享状态。

安装 Vuex：

npm install vuex

创建一个 store：

// store.js
import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

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

在组件中使用 Vuex：

<!-- BrotherOne.vue -->
<template>
  <button @click="sendMessage">Send Message</button>
</template>

<script>
import { mapMutations } from 'vuex';

export default {
  methods: {
    ...mapMutations(['setMessage']),
    sendMessage() {
      this.setMessage('Hello from Brother One!');
    }
  }
};
</script>

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

<script>
import { mapState } from 'vuex';

export default {
  computed: {
    ...mapState(['message'])
  }
};
</script>

3. 祖孙组件通信

如果需要在祖先组件与后代组件之间进行通信，可以使用 provide/inject 机制。

3.1. Provide/Inject

示例：

<!-- GrandparentComponent.vue -->
<template>
  <ParentComponent />
</template>

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

export default {
  components: { ParentComponent },
  provide() {
    return {
      message: 'Hello from Grandparent!'
    };
  }
};
</script>

<!-- ParentComponent.vue -->
<template>
  <ChildComponent />
</template>

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

export default {
  components: { ChildComponent }
};
</script>

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

<script>
export default {
  inject: ['message']
};
</script>

4. 插件和库

4.1. Vue Router

在使用 Vue Router 的情况下，可以通过路由传递参数来实现组件之间的通信。

示例：

// router.js
import Vue from 'vue';
import Router from 'vue-router';
import Home from './components/Home.vue';
import About from './components/About.vue';

Vue.use(Router);

export default new Router({
  routes: [
    {
      path: '/about/:message',
      component: About
    }
  ]
});

在 About 组件中，你可以访问到路由参数：

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

<script>
export default {
  computed: {
    message() {
      return this.$route.params.message;
    }
  }
};
</script>