如何从子组件向父组件传递计算属性对象？

针对Vue 3组合式API的场景，有两种常用方式可以让父组件获取子组件的计算属性对象：

1. 使用defineExpose暴露计算属性 #

子组件中通过defineExpose将计算属性对象暴露给父组件，父组件再通过模板引用获取：

子组件代码 #

<script setup>
import { computed, ref } from 'vue';

const someField = ref('foo');
const anotherField = ref('bar');

// 定义计算属性对象
const obj = computed(() => ({
  abc: someField.value,
  xyz: anotherField.value,
}));

// 暴露给父组件访问
defineExpose({
  obj
});
</script>

父组件代码 #

<script setup>
import { ref, onMounted } from 'vue';
import ChildComponent from './ChildComponent.vue';

// 创建子组件的模板引用
const childRef = ref(null);

onMounted(() => {
  // 注意：计算属性是Ref对象，需要通过.value访问实际值
  console.log('子组件的计算属性对象:', childRef.value.obj.value);
});
</script>

<template>
  <ChildComponent ref="childRef" />
</template>

2. 通过自定义事件主动传递数据 #

如果希望计算属性更新时自动同步给父组件，可以监听计算属性的变化，通过自定义事件主动推送数据：

子组件代码 #

<script setup>
import { computed, ref, watch } from 'vue';

// 声明自定义事件
const emit = defineEmits(['update:obj']);

const someField = ref('foo');
const anotherField = ref('bar');

const obj = computed(() => ({
  abc: someField.value,
  xyz: anotherField.value,
}));

// 监听计算属性变化，触发事件传递最新值
watch(obj, (newObj) => {
  emit('update:obj', newObj);
}, { immediate: true }); // 开启immediate确保组件初始化时就传递一次数据
</script>

父组件代码 #

<script setup>
import { ref } from 'vue';
import ChildComponent from './ChildComponent.vue';

// 存储从子组件接收的对象
const receivedObj = ref(null);

// 处理子组件传递的更新
const handleObjUpdate = (newObj) => {
  receivedObj.value = newObj;
};
</script>

<template>
  <ChildComponent @update:obj="handleObjUpdate" />
  <div>父组件接收的对象：{{ receivedObj }}</div>
</template>

方法选择建议 #

• 若父组件需要主动按需获取子组件的计算属性值，优先使用defineExpose+模板引用的方式；
• 若需要实时同步计算属性的更新到父组件，自定义事件的方式更合适。

内容的提问来源于stack exchange，提问作者panthro