vue3+ts v-model 深度学习

<template>
  <div>
    <h1>我是App.vue组件</h1>
    <div>isShpw:{{ isShow }}</div>
    <div>text:{{ text }}</div>
    <div><button @click="isShow = !isShow">开关</button></div>
    <hr />
    <vModeValue v-model:textVal.isBt="text" v-model="isShow"></vModeValue>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from "vue";
import vModeValue from "./components/v-model.vue";
const isShow = ref<boolean>(true);
const text = ref<string>("小满");
</script>

<style scoped></style>

v-model.vue:

<template>
  <div class="model" v-if="modelValue">
    <div class="close">
      <button @click="close">关闭</button>
    </div>
    <h3>我是v-model子组件 dialog</h3>
    <div>内容：<input @input="change" type="text" :value="textVal" /></div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from "vue";
const props = defineProps<{
  modelValue: boolean;
  textVal: string;
  textValModifiers?: {
    isBt: boolean;
  };
}>();
const emit = defineEmits(["update:modelValue", "update:textVal"]);

const close = () => {
  emit("update:modelValue", false);
};
const change = (e: Event) => {
  const target = e.target as HTMLInputElement;
  emit(
    "update:textVal",
    props?.textValModifiers?.isBt ? target.value + "变态" : target.value
  );
};
</script>

<style>
.model {
  width: 500px;
  border: 5px solid #ccc;
  padding: 10px;
}
.close {
  display: flex;
  justify-content: flex-end;
}
</style>