vue3中对于封装的组件 v-if失效，该怎么解决？

Z时代
2024-03-01
分类：IT

如下所示，我想点击编辑控制时间设置的显示。但结果是，时间设置一直都是隐藏状态。

<s-form style="width:100%">
    <s-form-item label="当前时间">
        <span>{{time}}</span>
        <span class="edit_txt" @click="handleShow">编辑</span>
    </s-form-item>
    <s-form-item label="时间设置" v-if="isShow">
        <el-date-picker
            v-model="newTime"
            type="datetime"
            placeholder="请选择时间"
        />
    </s-form-item>
</s-form>
<script lang="ts" setup>
import { ref } from "vue"
import { SFormItem, SForm } from "@/components"
const isShow = ref<boolean>(false)
const handleShow = () => {
   isShow.value = !isShow.value
}</script>

是不是我组件封装的有问题不兼容呢？
SForm

<script lang="ts">
import { h } from "vue"
export default {
   name: "SForm",
   props: {
      width: String,
      labelCol: Number
   },
   setup (props, context) {
      if (!context.slots || !context.slots.default) return null
      const slots = context.slots.default().map(slot => ({
         ...slot,
         props: {
            ...props,
            ...slot.props
         }
      }))
      return () => h("div", {
         className: "s-form"
      }, slots)
   }
}
</script>

SFormItem

<template>
    <div class="s-form-item" :style="{width}">
        <div class="label" :style="{width:labelWidth}">{{label?`${label}：`:' '}}</div>
        <slot></slot>
    </div>
</template>
<script lang="ts">
export default {
   name: "s-form-item",
   props: {
      label: {
         type: String,
         default: ""
      },
      width: {
         type: String,
         default: "100%"
      },
      labelCol: {
         type: Number,
         default: 1
      }
   },
   setup (props: {labelCol:number, width:string}) {
      const persents = ["10%", "20%", "30%", "40%", "50%", "60%", "80%", "90%", "100%"]
      const labelWidth = persents[props.labelCol]
      return {
         labelWidth,
         ...props
      }
   }
}</script>