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>