当前位置：首页 > VUE

vue实现父子通讯

2026-01-17 23:38:47VUE

父组件向子组件传值（Props）

在父组件中通过v-bind（或简写为:）向子组件传递数据。子组件通过props接收数据。

父组件代码示例：

<template>
  <ChildComponent :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: {
      type: String,
      required: true
    }
  }
};
</script>

子组件向父组件传值（自定义事件）

子组件通过$emit触发自定义事件，父组件通过v-on（或简写为@）监听事件并处理数据。

子组件代码示例：

<template>
  <button @click="sendMessage">Send to Parent</button>
</template>

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

父组件代码示例：

<template>
  <ChildComponent @message-from-child="handleChildMessage" />
</template>

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

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

使用`ref`直接访问子组件

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

vue实现父子通讯

父组件代码示例：

<template>
  <ChildComponent 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>

子组件代码示例：

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

使用`provide/inject`跨层级通讯

祖先组件通过provide提供数据，后代组件通过inject注入数据，适合深层嵌套组件通讯。

祖先组件代码示例：

vue实现父子通讯

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

后代组件代码示例：

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

使用Vuex状态管理

对于复杂应用，可使用Vuex集中管理状态，实现任意组件间的通讯。

Store示例：

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

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

组件中使用：

<script>
export default {
  computed: {
    count() {
      return this.$store.state.count;
    }
  },
  methods: {
    increment() {
      this.$store.commit('increment');
    }
  }
};
</script>