vue实现页面逆传
Vue 实现页面逆传（反向传值）
在 Vue 中实现页面逆传（即子组件向父组件传值或兄弟组件间传值）可以通过以下几种方式：
使用 $emit 触发自定义事件
子组件通过 $emit 触发一个自定义事件，父组件监听该事件并接收数据。
子组件代码：
<template>
<button @click="sendData">传递数据给父组件</button>
</template>
<script>
export default {
methods: {
sendData() {
this.$emit('child-event', { message: '数据来自子组件' });
}
}
}
</script>父组件代码：
<template>
<child-component @child-event="handleChildEvent" />
</template>
<script>
export default {
methods: {
handleChildEvent(data) {
console.log(data.message); // 输出：数据来自子组件
}
}
}
</script>使用 v-model 实现双向绑定
通过 v-model 和 props + $emit 结合实现双向数据绑定。
子组件代码：
<template>
<input :value="value" @input="$emit('input', $event.target.value)" />
</template>
<script>
export default {
props: ['value']
}
</script>父组件代码：
<template>
<child-component v-model="parentData" />
</template>
<script>
export default {
data() {
return {
parentData: ''
}
}
}
</script>使用 Vuex 状态管理
对于跨组件或复杂场景，可以使用 Vuex 集中管理状态。
Vuex Store 示例：
const store = new Vuex.Store({
state: {
sharedData: null
},
mutations: {
updateData(state, payload) {
state.sharedData = payload;
}
}
});组件中调用：
// 设置数据
this.$store.commit('updateData', { message: '共享数据' });
// 获取数据
this.$store.state.sharedData;使用 Event Bus
创建一个全局事件总线，用于任意组件间通信。
创建 Event Bus：
// event-bus.js
import Vue from 'vue';
export const EventBus = new Vue();发送事件：
import { EventBus } from './event-bus.js';
EventBus.$emit('custom-event', { data: '跨组件数据' });接收事件：
import { EventBus } from './event-bus.js';
EventBus.$on('custom-event', (data) => {
console.log(data);
});使用 provide 和 inject
祖先组件通过 provide 提供数据，后代组件通过 inject 注入数据。
祖先组件：
export default {
provide() {
return {
sharedData: '祖先提供的数据'
}
}
}后代组件：
export default {
inject: ['sharedData'],
mounted() {
console.log(this.sharedData); // 输出：祖先提供的数据
}
}注意事项
- 简单父子通信优先使用
$emit和props。 - 跨层级或复杂场景建议使用 Vuex 或 Event Bus。
provide/inject主要用于高阶插件/组件库开发，常规业务慎用。
