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