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

更新时间：2024年06月07日 14:51:54 作者：沉浮yu大海

在 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>

父子组件通信与兄弟组件通信总结

理解 Vue 组件之间的通信是开发复杂应用程序的关键。通过 props 和 $emit 进行父子组件通信，以及使用事件总线或 Vuex 进行兄弟组件通信，你可以更有效地管理和组织代码。

到此这篇关于Vue 组件之间的通信的文章就介绍到这了,更多相关Vue 组件通信内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

vue的事件绑定与方法详解
这篇文章主要为大家详细介绍了vue的事件绑定与方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-08-08
Vue组件实现卡片动画倒计时示例详解
这篇文章主要介绍了Vue组件实现卡片动画倒计时示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-07-07
antd vue 如何调整checkbox默认样式
这篇文章主要介绍了antd vue 如何调整checkbox默认样式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-12-12
vue中使用Animate.css的教程详解
Animate.css这个动画库,很多的动画在这个库里面都定义好了,我们用的时候可以直接使用里面的类名就可以,下面我们就来看看如何在vue项目中使用Animate.css吧
2023-08-08
Vue组件之间的通信方式详细讲解
对于vue来说，组件之间的消息传递是非常重要的，用vue可以是要组件复用的，而组件实例的作用域是相互独立，这意味着不同组件之间的数据无法互相引用，一般来说，组件之间可以有几种关系，下面是我对组件之间消息传递的常用方式的总结
2022-08-08
vue axios sessionID每次请求都不同的原因以及修改方式
这篇文章主要介绍了vue axios sessionID每次请求都不同的原因以及修改方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2023-12-12
Vue3+Vite项目依赖更新的完整指南
本文介绍了Vue3项目依赖更新的推荐方法,包括使用npm-check-updates或Yarn交互式升级工具,强调需谨慎处理版本兼容性及破坏性变更,建议分步更新并充分测试,确保项目稳定性,需要的朋友可以参考下
2025-09-09
解决element-ui里的下拉多选框 el-select 时,默认值不可删除问题
这篇文章主要介绍了解决element-ui里的下拉多选框 el-select 时,默认值不可删除问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-08-08
VUE-Table上绑定Input通过render实现双向绑定数据的示例
今天小编就为大家分享一篇VUE-Table上绑定Input通过render实现双向绑定数据的示例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-08-08
Vue项目动态加载图片正确写法
最近做项目的时候遇到了动态加载图片的需求,所以这里给大家总结下,这篇文章主要给大家介绍了关于Vue项目动态加载图片的正确写法,文中通过代码介绍的非常详细,需要的朋友可以参考下
2024-04-04