当前位置：首页 > VUE

vue实现父子组件

2026-01-16 07:47:19VUE

Vue 父子组件通信实现方式

1. 父组件向子组件传递数据（Props） 父组件通过 props 向子组件传递数据，子组件通过 props 接收数据。

父组件模板：

<template>
  <child-component :message="parentMessage" />
</template>

<script>
import ChildComponent from './ChildComponent.vue';

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

子组件模板：

<template>
  <div>{{ message }}</div>
</template>

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

2. 子组件向父组件传递数据（自定义事件） 子组件通过 $emit 触发自定义事件，父组件通过 v-on 监听事件并处理。

子组件模板：

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

<script>
export default {
  methods: {
    sendMessage() {
      this.$emit('message-sent', 'Hello from child');
    }
  }
};
</script>

父组件模板：

<template>
  <child-component @message-sent="handleMessage" />
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: { ChildComponent },
  methods: {
    handleMessage(message) {
      console.log(message); // 输出: Hello from child
    }
  }
};
</script>

3. 父组件访问子组件实例（Refs） 父组件通过 ref 属性获取子组件实例，直接调用子组件的方法或访问数据。

父组件模板：

<template>
  <child-component ref="childRef" />
  <button @click="callChildMethod">Call Child Method</button>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

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

子组件模板：

<template>
  <div>Child Component</div>
</template>

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

4. 使用 Provide/Inject 跨层级传递数据 适用于深层嵌套组件，祖先组件通过 provide 提供数据，后代组件通过 inject 注入数据。

祖先组件：

<script>
export default {
  provide() {
    return {
      sharedData: 'Shared data from ancestor'
    };
  }
};
</script>

后代组件：

<script>
export default {
  inject: ['sharedData'],
  mounted() {
    console.log(this.sharedData); // 输出: Shared data from ancestor
  }
};
</script>

5. 使用 Event Bus 跨组件通信 创建一个中央事件总线，允许非父子关系的组件通信。

创建 Event Bus：

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

发送事件组件：

<script>
import { EventBus } from './event-bus.js';

export default {
  methods: {
    sendMessage() {
      EventBus.$emit('custom-event', 'Event bus message');
    }
  }
};
</script>

接收事件组件：

<script>
import { EventBus } from './event-bus.js';

export default {
  created() {
    EventBus.$on('custom-event', message => {
      console.log(message); // 输出: Event bus message
    });
  },
  beforeDestroy() {
    EventBus.$off('custom-event');
  }
};
</script>

6. 使用 Vuex 状态管理 对于复杂应用，使用 Vuex 集中管理状态，实现组件间数据共享。

Store 定义：

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

组件中使用：

<template>
  <div>{{ $store.state.count }}</div>
  <button @click="incrementCount">Increment</button>
</template>

<script>
export default {
  methods: {
    incrementCount() {
      this.$store.commit('increment');
    }
  }
};
</script>

vue实现父子组件