【vue3】公共组件reactive中响应式数据的条件判断

需求

封装复用组件时，根据不同的需求使用的同一数据的值也会不同

例如：
后台管理中的表格数据的添加和编辑修改，当从添加点击进去后，数据为空，跳转传值为空；从编辑点击跳转后，跳转传参，接收参数，将数据显示到表单中。此时由于ts的限制，当数据为空时表单数据初始化为undefind才会显示表单提示内容，所以当功能为添加试题时，表单数据应为undefind，而编辑功能中数据为接收到的参数，鱼和熊掌不可兼得，不得已想到通过判断

解决

判断，除了if还有三目运算，没错就是它，相信很多小伙伴已经能够想到了，使用它就可以完美解决了

三目运算公式：判断条件 ？ 真 ：假

  formState:
        title === '添加试题'
          ? {
              type: undefined,
              name: undefined,
              province: undefined,
              uploadpeople: undefined,
              tag: undefined,
              selection: undefined,
              answer: undefined,
              parsing: undefined,
            }
          : {
              type: Datarow.value.type,
              name: Datarow.value.name,
              province: Datarow.value.province,
              uploadpeople: Datarow.value.uploadpeople,
              tag: Datarow.value.tag,
              selection: Datarow.value.selection,
              answer: Datarow.value.answer,
              parsing: Datarow.value.parsing,
            },

优化

业务需求其实是增加和修改共用同一个组件，此时数据定义在公共组件中，数据就需要以上的判断处理。但其实这不是一个很好的处理方式。我们已经提出了公共组件进行复用，此时完全可以将数据通过prop进行传参，这样在公共组件（子组件）中直接赋值即可

<!-- 公共组件（子组件A） -->
<template> 
  <div>{{props.formState}}</div>
</template>
<script setup>
	const props = defineProps({
	  formState: Object
	})
</script>

<!-- 父组件-新增 -->
<template>
  <div>
    <h1>新增</h1>
    <A :formState="state.formState"></A>
  </div>
</template>
<script setup>
import { reactive} from 'vue'
import A from "../components/A.vue"
export default {
	setup () {
		const state = reactive({
	      formState: {
	      		type: undefined,
	             name: undefined,
	             province: undefined,
	             uploadpeople: undefined,
	             tag: undefined,
	             selection: undefined,
	             answer: undefined,
	             parsing: undefined,
	      }
		})
		return {
			state
		}
  	}
}
</script>

<!-- 父组件-编辑 -->
<template>
  <div>
    <h1>编辑</h1>
    <A :formState="state.formState"></A>
  </div>
</template>
<script setup>
import { reactive} from 'vue'
import A from "../components/A.vue"
export default {
	setup () {
		const state = reactive({
	      formState: {
              type: Datarow.value.type,
              name: Datarow.value.name,
              province: Datarow.value.province,
              uploadpeople: Datarow.value.uploadpeople,
              tag: Datarow.value.tag,
              selection: Datarow.value.selection,
              answer: Datarow.value.answer,
              parsing: Datarow.value.parsing,
            },
	    })
	    return {
	       state
	    }
	}
}
</script>