当前位置：首页 > VUE

vue联动如何实现

2026-03-30 06:03:18VUE

Vue 联动实现方法

Vue 联动通常指组件间的数据或行为交互，常见于表单、列表等场景。以下是几种典型实现方式：

父子组件通信（Props + Events）

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

<!-- 父组件 -->
<template>
  <ChildComponent :value="parentValue" @update="handleUpdate" />
</template>

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

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

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

使用 `v-model` 双向绑定

简化父子组件间的双向数据绑定，需子组件内声明 model 选项。

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

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

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

状态管理（Vuex/Pinia）

适用于跨层级或复杂组件间的数据共享。

// Vuex 示例
// store.js
export default new Vuex.Store({
  state: { sharedValue: '' },
  mutations: {
    updateValue(state, payload) {
      state.sharedValue = payload;
    }
  }
});

// 组件中
this.$store.commit('updateValue', newValue);

事件总线（Event Bus）

通过全局事件中心实现非父子组件通信。

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

// 组件A（触发事件）
EventBus.$emit('event-name', data);

// 组件B（监听事件）
EventBus.$on('event-name', (data) => { /* 处理逻辑 */ });

Provide/Inject

跨层级组件数据传递，适用于深层嵌套场景。

// 祖先组件
export default {
  provide() {
    return { sharedData: this.data };
  }
};

// 后代组件
export default {
  inject: ['sharedData']
};

动态组件与响应式数据

通过响应式数据驱动组件切换或行为。

vue联动如何实现

<template>
  <component :is="currentComponent" :key="componentKey" />
  <button @click="reloadComponent">重新加载</button>
</template>

<script>
export default {
  data() {
    return {
      currentComponent: 'ComponentA',
      componentKey: 0
    };
  },
  methods: {
    reloadComponent() {
      this.componentKey += 1;
    }
  }
};
</script>