Vue 中组件通信6种常用的方法

王小婷

发布于 2023-09-16 08:53:10

64400

代码可运行

文章被收录于专栏：编程微刊编程微刊

运行总次数：0

代码可运行

在 Vue 中，组件通信有多种方式可以实现，下面介绍几种常用的方法：

一：Props 和事件

父组件可以通过 Props 将数据传递给子组件，并通过事件监听子组件的事件来实现双向通信。

子组件可以通过 $emit 方法触发事件，父组件可以通过监听子组件的事件来获取数据。

父组件向子组件传递数据：

<template>
  <child-component :message="parentMessage" @update="handleUpdate"></child-component>
</template>

<script>
export default {
  data() {
    return {
      parentMessage: 'Hello from parent',
    };
  },
  methods: {
    handleUpdate(message) {
      console.log('Received from child:', message);
    },
  },
};
</script>

子组件接收父组件的数据，并触发事件：

<template>
  <div>
    <p>{{ message }}</p>
    <button @click="sendMessage">Send Message</button>
  </div>
</template>

<script>
export default {
  props: ['message'],
  methods: {
    sendMessage() {
      this.$emit('update', 'Hello from child');
    },
  },
};
</script>

二：自定义事件总线

可以创建一个 Vue 实例作为事件总线，用于组件间的通信。

其他组件可以通过该实例的

on 方法来触发和监听事件。

创建事件总线：

// eventBus.js
import Vue from 'vue';

export const eventBus = new Vue();

在组件中使用事件总线：

<template>
  <div>
    <button @click="sendMessage">Send Message</button>
  </div>
</template>

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

export default {
  methods: {
    sendMessage() {
      eventBus.$emit('message', 'Hello from component');
    },
  },
};
</script>

监听事件并接收数据：

<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>

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

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

三：Vuex（状态管理）

如果需要在多个组件之间共享状态，可以使用 Vuex 进行状态管理。Vuex 提供了一个集中式的状态存储，可以在组件中访问和修改共享的状态。

首先，在根组件中创建和配置 Vuex：

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    message: 'Hello from Vuex',
  },
  mutations: {
    updateMessage(state, payload) {
      state.message = payload;
    },
  },
});

然后，在组件中使用 Vuex 的状态和触发 mutations：

<template>
  <div>
    <p>{{ message }}</p>
    <button @click="sendMessage">Send Message</button>
  </div>
</template>

<script>
export default {
  computed: {
    message() {
      return this.$store.state.message;
    },
  },
  methods: {
    sendMessage() {
      this.$store.commit('updateMessage', 'Hello from component');
    },
  },
};
</script>

通过在组件中使用 this.

store.commit 触发 mutations 来修改状态。

四：$refs

通过 $refs 可以在父组件中直接访问子组件的属性和方法，从而进行通信。

父组件访问子组件：

<template>
  <div>
    <child-component ref="child"></child-component>
    <button @click="sendMessage">Send Message</button>
  </div>
</template>

<script>
export default {
  methods: {
    sendMessage() {
      this.$refs.child.receiveMessage('Hello from parent');
    },
  },
};
</script>

子组件接收父组件的消息：

<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>

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

通过 $refs 可以直接访问子组件实例，并调用其方法或修改其属性。

五：Provide / Inject

通过 provide 和 inject 可以在父组件中提供数据，并在子孙组件中注入并使用这些数据，实现跨层级的组件通信。

父组件提供数据：

<template>
  <div>
    <child-component></child-component>
  </div>
</template>

<script>
export default {
  provide: {
    message: 'Hello from parent',
  },
};
</script>

子组件注入并使用数据：

<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>

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

通过 provide 在父组件中提供数据，然后在子组件中使用 inject 来注入并使用这些数据。

这些是几种常用的 Vue 组件通信方式。选择合适的方式取决于你的需求和项目的复杂性。

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

如有侵权请联系 cloudcommunity@tencent.com 删除

事件总线

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

登录后参与评论

0 条评论

热度