学习vue3 第十一章（v-model）

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

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

//父组件
<div>
    开关{{flag}}
    <my-dialog v-model="flag" v-model:title='title'></my-dialog>
</div>
import myDialog from "./myDialog"

let flag = ref(false)
let title = ref("大标题")


-------------------------------------------
//子组件myDialog
<template>
     <div v-if='propData.modelValue ' class="dialog">
         <div class="dialog-header">
             <div>{{propData.title}}</div><div @click="close">x</div>
         </div>
         <div class="dialog-content">
            内容
         </div>
         
     </div>
</template>
 
<script setup lang='ts'>
 
type Props = {
   modelValue:boolean,
   title:string
}
 
const propData = defineProps<Props>()
 
const emit = defineEmits(['update:modelValue', 'update:title'])
 
const close = () => {
     emit('update:modelValue',false)
     emit('update:title','我要改变大标题')
}
 
</script>
 
<style lang='less'>
.dialog{
    width: 300px;
    height: 300px;
    border: 1px solid #ccc;
    position: fixed;
    left:50%;
    top:50%;
    transform: translate(-50%,-50%);
    &-header{
        border-bottom: 1px solid #ccc;
        display: flex;
        justify-content: space-between;
        padding: 10px;
    }
    &-content{
        padding: 10px;
    }
}
</style>

 修饰符

默认提供的修饰符：

v-model.trim(去掉两端空格)

v-model.number(只输入number)

v-model.lazy(change事件触发)