Vue---11种组件传值方式总结，总有一款适合你

本文链接：https://blog.csdn.net/COCOLI_BK/article/details/126225952

本文详细介绍了Vue中各种组件间通信的方式，包括父子传值（属性与事件）、非父子传值（$bus、ref、路由传参、Vuex、Pinia、本地缓存、provide/inject及消息订阅pubsub-js），并提供了每种方式的实践示例，帮助开发者灵活应对不同场景下的数据传递需求。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

4. children与parent（不推荐）

5. ref的方式传值

6. router路由传参query/params

7. 路由组件方式传值[:xxx]

8. Vuex状态管理工具传值

9. Pinia状态管理工具传值（Vue 3+）

10. 本地缓存传值 localStorage/sessionStorage

11. 注入的方式传值 provide/inject

12. 消息订阅与发表pubsub-js

Vue 2 组件间通信方法实例

1. 父子传值

关键点：父组件通过props向子组件传递数据。
实例代码：

<!-- parent.vue -->
<template>
 <div>
    <child :parent-message="message"/>
 </div>
</template>

<script>
 import Child from './child.vue';

 export default {
   components: {
     Child,
   },
   data() {
     return {
       message: 'Hello from parent!',
     };
   },
 };
</script>

<!-- child.vue -->
<template>
 <div>
    <p>{{ parentMessage }}</p>
 </div>
</template>

<script>
 export default {
   props: ['parentMessage'],
 };
</script>

2. 子父传值

关键点：子组件通过自定义事件向父组件传递数据。
实例代码：

<!-- parent.vue -->
<template>
 <div>
    <child @child-event="handleChildEvent"/>
    <p>{{ childMessage }}</p>
 </div>
</template>

<script>
 import Child from './child.vue';

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

<!-- child.vue -->
<template>
 <div>
    <button @click="sendToParent">Send Message</button>
 </div>
</template>

<script>
 export default {
   methods: {
     sendToParent() {
       this.$emit('child-event', 'Hello from child!');
     },
   },
 };
</script>

3. 非父子传值（兄弟组件通信）

关键点：使用事件总线或Vuex进行通信。
实例代码：事件总线方式

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

<!-- componentA.vue -->
<script>
 import { EventBus } from './eventBus.js';

 export default {
   methods: {
     sendData() {
       EventBus.$emit('sendDataEvent', 'Hello from ComponentA!');
     },
   },
 };
</script>

<!-- componentB.vue -->
<script>
 import { EventBus } from './eventBus.js';

 export default {
   created() {
     EventBus.$on('sendDataEvent', (data) => {
       console.log('Received:', data);
     });
   },
 };
</script>

4. children与parent（不推荐）

关键点：直接访问$parent或$children，不推荐使用。

5. ref的方式传值

关键点：父组件通过ref引用子组件，调用其方法。
实例代码：

<!-- parent.vue -->
<template>
 <div>
    <child ref="childComponent"/>
 </div>
</template>

<script>
 import Child from './child.vue';

 export default {
   components: {
     Child,
   },
   methods: {
     callChildMethod() {
       this.$refs.childComponent.childMethod();
     },
   },
 };
</script>

<!-- child.vue -->
<script>
 export default {
   methods: {
     childMethod() {
       console.log('Called from parent');
     },
   },
 };
</script>

6. router路由传参query/params

关键点：通过路由query或params参数传递数据。
实例代码：

// 在路由中定义
const routes = [
 {
   path: '/user/:id',
   component: User,
 },
];

<!-- user.vue -->
<script>
 export default {
   created() {
     console.log('User:', this.$route.params.id);
   },
 };
</script>

7. 路由组件方式传值[:xxx]

关键点：通过路由组件的props绑定传递数据。
实例代码：

<!-- 在路由配置中 -->
const routes = [
 {
   path: '/user',
   component: User,
   props: true,
 },
];

<!-- 在父组件中 -->
<router-link :to="{ name: 'user', params: { userId: 123 } }">User</router-link>

<!-- user.vue -->
<script>
 export default {
   props: ['userId'],
 };
</script>

8. Vuex状态管理工具传值

关键点：通过Vuex的state、mutation、action进行数据管理与通信。
实例代码：

// 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);
    },
  },
});

<!-- component.vue -->
<script>
 import { mapActions } from 'vuex';

 export default {
   methods: {
     ...mapActions(['updateMessage']),
   },
 };
</script>

9. Pinia状态管理工具传值（Vue 3+）

关键点：通过Pinia的store进行数据管理与通信。由于Pinia是Vue 3的库，这里不提供Vue 2的代码。

10. 本地缓存传值 localStorage/sessionStorage

关键点：使用本地存储进行数据存储。
实例代码：

<!-- component.vue -->
<script>
 export default {
   created() {
     const message = localStorage.getItem('message');
     if (message) {
       console.log('Message:', message);
     }
   },
   methods: {
     saveToLocalStorage() {
       localStorage.setItem('message', 'Hello from Component!');
     },
   },
 };
</script>

11. 注入的方式传值 provide/inject

关键点：通过provide和inject在组件树中传递数据。
实例代码：

<!-- parent.vue -->
<script>
 export default {
   provide() {
     return {
       message: 'Hello from Parent',
     };
   },
 };
</script>

<!-- child.vue -->
<script>
 export default {
   inject: ['message'],
 };
</script>

12. 消息订阅与发表pubsub-js

关键点：使用PubSub库进行消息订阅和发布。
实例代码：

// pubsub.js
import PubSub from 'pubsub-js';

export const pubsub = PubSub;

<!-- componentA.vue -->
<script>
 import { pubsub } from './pubsub.js';

 export default {
   methods: {
     publishData() {
       pubsub.publish('dataEvent', 'Hello from ComponentA!');
     },
   },
 };
</script>

<!-- componentB.vue -->
<script>
 import { pubsub } from './pubsub.js';

 export default {
   created() {
     this.token = pubsub.subscribe('dataEvent', (msg, data) => {
       console.log('Received:', data);
     });
   },
 };
</script>

以上示例代码展示了Vue 2中不同组件间通信方法的实现方式。