子组件接受的props值后用computed处理再修改后传给父组件

场景

父组件传个值给子组件，子组件拿到之后（可能有人需要用computed）再进行修改，最后传回给父组件。

解决方案

父组件

// 父组件
<template>
  <Son :fData="data" @updateFData="handleUpdateFData" />
</template>

<script setup>
const data = ref(false);
const handleUpdateFData = (newVal) => {
	data.value = newVal;
}
</sript>

子组件

// 子组件
<template>
	<div class="" @click="onClick">点击</div>
</template>

<script setup>
const props = defineProps({
  fData: {type: Boolean, required: true}
})
const emits = defineEmits(['updateFData'])
const computedFData = computed({
    get: () => {
       return props.fData
   },
   set: (newVal) => {
      emits('updateFData', newVal)
   }
})

// 点击
const onClick = () => {
  computedFData.value = !computedFData.value
}
</sript>

其他

个人觉得没必要使用computed，也可以使用watch，感觉更方便一点。

其次，vue2中，props的传值如果遇到在子组件修改后传回给父组件时报错的情况（例如element ui的dialog组件的展示与否），可以考虑把props传的值包装成一个对象的属性值，这样就可以修改props的值了。