vite+ts+vue3 知识点（v-model用法）

应用场景：目的是让子组件可以修改父组件的传的值

父组件

<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>