vue3 v-model自定义修饰符写法

在vue3 v-model是破坏性的更新的
c-model在组件也很重要
v-model是一个语法糖 由emit+props组合而成
1.默认值改变
props:value==》(vue3)modelValue
事件：input==>（vue3）update:modelValue(不可改名哦);
新增多个v-model和自定义修饰符

上案例：
App.vue

<template>
  <button @click="flag=!flag;title='我是烟火'" 
       style="position:absolute;top:10%">切换  {{flag}}</button>  
     <Dialog v-model="flag"   v-model:title="title" @clicks='click'></Dialog>
 
</template> 
<script   setup lang="ts">
import  {ref} from 'vue'
import  Dialog from './components/Dialog.vue' 
const flag=ref<Boolean>(true);
const title=ref<string>('我是烟火')
	//vue2的自定义事件  子组件传输emit
  const clicks=(fla:string)=>{
    title.value=fla;
  }
</script>

<style scoped>
 
</style>

Dialog.vue

<template>
    <div class="dialog" v-if="modelValue">
       <div class="dialog-header">
           <div>标题--{{title}}</div>
           <div @click="close">x</div>
       </div>
       <div class="dialog-content">
           内容
       </div>
    </div>
</template>

<script setup lang="ts">
import { defineProps, defineEmits } from "vue"

type Props={
    modelValue:boolean  ,//接收的是默认值v-model="flag"  
    title:string,         //接收的是自定义的v-model:title="title"
}
const PropsData= defineProps<Props>()
const  emit=defineEmits(['update:modelValue','update:title','clicks'])
const close=()=>{ 
    // 传过来的是modelValue值是false所以update:modelValue直接更改父元素的flag存储的布尔值
     emit('update:modelValue',false);
    // 传过来的是title值是‘我是烟火’所以update:title直接更改父元素的title存储的string值
     emit('update:title','我是炮仗');
     //你也可以使用vue2的写法(自己想咋写都行不推荐)：父组件去接收自定义事件
	   emit('clicks','我是炮仗');
}
</script>

<style scoped lang="less">
.dialog{
    width: 300px;height:300px;
    border:1px solid red;
    position: absolute;
    left:50%;right: 50%;
    transform: translate(-50%,-50%);
    &-header{
        border-bottom: 1px solid red;
        display: flex;
        justify-content: space-between;
        padding: 10px;
    }
    &-content{
                padding: 10px;

    }
}
</style>

2.带自定义修饰符的写法

<template>
<div class="" style="position:absolute;top:10%">
  <button @click="flag=!flag;title='我是烟火'"  >{{flag}}{{title}}</button>
       
 </div>
     <!-- 绑定在v-model上或者是v-model的修饰符(v-model.xx='' 子组件接收的都是boolean值)
      v-model:title.aa="title"   :title是传输的正常值 .aa是布尔值
      -->
     <Dialog v-model="flag" v-model:title.aa="title" v-model.xiaozhu="flag"></Dialog>
</template> 
<script   setup lang="ts">
import  {ref,Directive, DirectiveBinding} from 'vue' 
import  Dialog from './components/Dialog.vue' 
const flag=ref<Boolean>(true);
const title=ref<string>('我是烟火') 
const aa=ref('') 
</script>

<style scoped>
 
</style>

<template>
    <div class="dialog" v-if="modelValue">
       <div class="dialog-header">
           <div>标题--{{title}}</div>
           <div @click="close">x</div>
       </div>
       <div class="dialog-content">
           内容
       </div>
    </div>
</template>

<script setup lang="ts">
import { defineProps, defineEmits } from "vue"

type Props={
    modelValue:boolean  ,//接收的是默认值v-model="flag"
    title:string,
//  xiaozhu其值为 true——因为 xiaozhu 被设置在了写为 v-model.xiaozhu="flag" 的 v-model 绑定上 
    modelModifiers?:{//v-model加的修饰符v-model.xiaozhu="flag" 默认的是modelModifiers
      xiaozhu:boolean 
    },
//aa其值为 true——因为 aa 被设置在了写为 v-model:title.aa="title" 的 v-model 绑定上
//v-model加的修饰符 v-model:title.aa="title"不在是默认的modelModifiers而是titleModifiers
    titleModifiers?:{        
      aa:boolean
    }
}
const PropsData= defineProps<Props>()
const  emit=defineEmits(['update:modelValue','update:title'])
const close=()=>{
    if(PropsData.titleModifiers?.aa){
      emit('update:title','我是你aa')
    }else{
      emit('update:title','我是bb')
        
    }
    // 传过来的是modelValue值是false所以update:modelValue直接更改父元素的flag存储的布尔值
    emit('update:modelValue',false);
}
</script>

<style scoped lang="less">
.dialog{
    width: 300px;height:300px;
    border:1px solid red;
    position: absolute;
    left:50%;right: 50%;
    transform: translate(-50%,-50%);
    &-header{
        border-bottom: 1px solid red;
        display: flex;
        justify-content: space-between;
        padding: 10px;
    }
    &-content{
                padding: 10px;

    }
}
</style>