- 父组件
<!-- -->
<script setup lang="ts">
import vModelVue from './vModelVue.vue'
let flag = ref<boolean>(false);
let text = ref<string>('父组件文本')
</script>
<template>
<div class='bigbox'>
<!-- .isBt是自定义修饰符号,可传可不传, 内置的有lazy trim number -->
<vModelVue v-model:textVal.isBt="text" v-model="flag" ></vModelVue>
{{ text }}
<p v-if="flag">显示隐藏请按下面按钮</p>
<button @click="() => { flag = !flag}">显示隐藏</button>
</div>
</template>
<style lang='scss' scoped>
.bigbox {
border: 2px solid green;
}
</style>
2.子组件
<!-- vModelVue -->
<script setup lang="ts">
import {ref,reactive, defineProps, defineEmits} from 'vue'
//vue3中的默认值是:modelValue
const props = defineProps<{
modelValue: boolean,
textVal:string,
textValModifiers?: {//如果自定义修饰符,这里是固定写法xxxModifiers
isBt: boolean
}
}>()
const emit = defineEmits(['update:modelValue', 'update:textVal'])
const close = () => {
emit('update:modelValue', false)
}
const change = (event) => {
const target = event.target as HTMLInputElement
emit('update:textVal',props.textValModifiers ? target.value + '加后缀': target.value)
}
</script>
<template>
<div class='innerbox'>
{{ modelValue }}
<input type="text" :value="textVal" @input="change">
<p v-show="modelValue">文本:{{ textVal }}</p>
<button @click="close">关闭vModelVue的内容</button>
</div>
</template>
<style lang='scss' scoped>
.innerbox {
border: 2px solid red;
}
</style>
