应用场景:目的是让子组件可以修改父组件的传的值
父组件
<template>
<div>
{{ flag }}-------{{ text }}
<button @click="btn">父组件更改</button>
// 父组件传值
<Son v-model="flag" v-model:modelText="text"></Son>
</div>
</template>
<script setup lang="ts">
import Son from './components/Son1.vue'
let flag = ref(false)
let text = ref('1')
const btn = () => {
flag.value = !flag.value
text.value = '3'
}
</script>
<style scoped lang="less">
</style>
子组件改值
<template>
<div>
<div class="divBgc" v-if="modelValue">
子组件 <button @click="btn">子组件更改</button>
</div>
</div>
</template>
<script setup lang="ts" name="Father">
// 通过 defineProps 定义传值类型
defineProps<{
modelValue: boolean
modelText: string
}>()
// 通过 defineEmits 接收传值
const emit = defineEmits(['update:modelValue', 'update:modelText'])
// 通过 emit 更改值
const btn = () => {
emit('update:modelValue', false)
emit('update:modelText', '2')
}
</script>
<style scoped lang="less">
.divBgc {
width: 200px;
height: 200px;
background-color: pink;
}
</style>