深入v-model

v-model在vue3中属于破坏性更新

v-model在组件里面也是很重要的

v-model 其实是一个语法糖 通过props 和 emit组合而成的

1.默认值的改变

prop：value -> modelValue；
事件：input -> update:modelValue；
v-bind 的 .sync 修饰符和组件的 model 选项已移除
新增 支持多个v-model
新增 支持自定义修饰符

父组件

<template>
  <!-- <Layout /> -->
  <div class="APP">我是根组件
    <button @click="changeFlag">change</button>
    <div>{{ flag }}</div>
    <div>title:{{ title }}</div>
    <!-- 自定义修饰符 -->
    <Dialog v-model.jiegege='flag' v-model:title.aaa='title' />
  </div>
</template>
<script lang="ts" setup>
import Dialog from '@/components/Dialog.vue'
const getSonNum = (num: number) => {
  console.log('接收到了num: ', num);
}
const title = ref('我是标题')
const flag = ref(true)
const changeFlag = () => {
  flag.value = !flag.value
}
</script>

子组件

<template>
    <div v-if="modelValue" class="dialog">
        <div class="dialog-header">
            <div>标题-{{ title }}</div>
            <div @click="close">x</div>
        </div>
        <div class="dialog-content">内容</div>
    </div>
</template>
<script lang="ts" setup>
type Props = {
    modelValue: boolean,
    title: string,
    //添加到组件 v-model 的修饰符将通过 modelModifiers prop 提供给组件。根据model和title来写Modifiers
    modelModifiers?: {
        jiegege: boolean
    },
    titleModifiers?: {
        aaa: boolean
    }
}
// const PropsData = defineProps<Props>()
const PropsData = withDefaults(defineProps<Props>(), { modelValue: false, title: '' })
const emit = defineEmits(['update:modelValue', 'update:title'])
const close = () => {
    console.log(PropsData.modelModifiers);
    //如果有自定义修饰符作用
    if (PropsData.modelModifiers?.jiegege) {
        // if (PropsData.titleModifiers?.aaa) {
        //do something
        emit('update:title', '我是一个标题')
    } else {
        //do something
        emit('update:title', '干掉标题')
    }
    emit('update:modelValue', false)
}
</script>