当前位置：首页 > VUE

vue如何实现组件通信

2026-02-22 02:45:33VUE

Vue 组件通信方式

Vue 提供了多种方式实现组件间的通信，根据不同的场景和需求，可以选择合适的方法。

Props 和 Events

父组件通过 props 向子组件传递数据，子组件通过 $emit 触发事件通知父组件。

// 父组件
<template>
  <ChildComponent :message="parentMessage" @update="handleUpdate" />
</template>

<script>
export default {
  data() {
    return {
      parentMessage: 'Hello from parent'
    };
  },
  methods: {
    handleUpdate(newMessage) {
      this.parentMessage = newMessage;
    }
  }
};
</script>

// 子组件
<template>
  <button @click="sendMessage">Send Message</button>
</template>

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

`$refs`

通过 ref 属性直接访问子组件的实例或 DOM 元素。

// 父组件
<template>
  <ChildComponent ref="child" />
  <button @click="callChildMethod">Call Child Method</button>
</template>

<script>
export default {
  methods: {
    callChildMethod() {
      this.$refs.child.childMethod();
    }
  }
};
</script>

// 子组件
<script>
export default {
  methods: {
    childMethod() {
      console.log('Child method called');
    }
  }
};
</script>

Event Bus

使用一个空的 Vue 实例作为中央事件总线，实现跨组件通信。

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

// 组件 A
<script>
import { EventBus } from './event-bus.js';
export default {
  methods: {
    sendMessage() {
      EventBus.$emit('message', 'Hello from A');
    }
  }
};
</script>

// 组件 B
<script>
import { EventBus } from './event-bus.js';
export default {
  created() {
    EventBus.$on('message', (msg) => {
      console.log(msg);
    });
  }
};
</script>

Vuex

对于大型应用，使用 Vuex 进行全局状态管理。

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

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++;
    }
  },
  actions: {
    increment({ commit }) {
      commit('increment');
    }
  }
});

// 组件 A
<script>
export default {
  methods: {
    increment() {
      this.$store.dispatch('increment');
    }
  }
};
</script>

// 组件 B
<template>
  <div>{{ $store.state.count }}</div>
</template>

`provide` 和 `inject`

祖先组件通过 provide 提供数据，后代组件通过 inject 注入数据。

// 祖先组件
<script>
export default {
  provide() {
    return {
      sharedData: 'Data from ancestor'
    };
  }
};
</script>

// 后代组件
<script>
export default {
  inject: ['sharedData'],
  mounted() {
    console.log(this.sharedData);
  }
};
</script>

`$attrs` 和 `$listeners`

用于跨层级传递属性和事件。

// 父组件
<template>
  <ChildComponent :attr1="value1" :attr2="value2" @event1="handler1" @event2="handler2" />
</template>

// 中间组件
<template>
  <GrandChildComponent v-bind="$attrs" v-on="$listeners" />
</template>

`v-model` 和 `.sync`

实现父子组件的双向绑定。

vue如何实现组件通信

// 父组件
<template>
  <ChildComponent v-model="message" />
</template>

// 子组件
<template>
  <input :value="value" @input="$emit('input', $event.target.value)" />
</template>

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