vue3学习(十一)
文章目录
- v-model的更新
- 多个 v-model 绑定
- 自定义修饰符
v-model
其实是一个语法糖 通过props
和emit
组合而成的
v-model的更新
vue2和vue3中的v-model是有一些差别的:
- prop:
value
变为modelValue
- 事件:
input
变为update:modelValue
- v-bind 的
.sync
修饰符和组件的model
选项已移除 - 新增 支持
多个v-model
- 新增 支持
自定义修饰符 Modifiers
父组件
<template><button @click="show = !show">开关{{show}}</button><Dialog v-model="show"></Dialog>
</template><script setup lang='ts'>
import Dialog from "./components/Dialog/index.vue";
import {ref} from 'vue'
const show = ref(false)
</script><style>
</style>
子组件
<template><div v-if='propData.modelValue ' class="dialog"><div class="dialog-header"><div>标题</div><div @click="close">x</div></div><div class="dialog-content">内容</div></div>
</template><script setup lang='ts'>type Props = {默认就叫modelValuemodelValue:boolean
}const propData = defineProps<Props>()emit的默认事件名称写法
const emit = defineEmits(['update:modelValue'])const close = () => {emit('update:modelValue',false)
}</script>
多个 v-model 绑定
父组件
<template><button @click="show = !show">开关{{show}} ----- {{title}}</button><Dialog v-model:title='title' v-model="show"></Dialog>
</template><script setup lang='ts'>
import Dialog from "./components/Dialog/index.vue";
import {ref} from 'vue'
const show = ref(false)
const title = ref('我是标题')
</script><style>
</style>
子组件
<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 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>
自定义修饰符
添加到组件 v-model
的修饰符将通过 modelModifiers prop 提供给组件。在下面的示例中,我们创建了一个组件,其中包含默认为空对象的 modelModifiers prop
父组件
<template><button @click="show = !show">开关{{show}} ----- {{title}}</button>这里添加修饰符<Dialog v-model:title.flag='title' v-model="show"></Dialog>
</template><script setup lang='ts'>
import Dialog from "./components/Dialog/index.vue";
import {ref} from 'vue'
const show = ref(false)
const title = ref('我是标题')
</script><style>
</style>
<script setup lang='ts'>type Props = {modelValue: boolean,title?: string,默认写法modelModifiers?: {default: () => {}}用的是修饰符前面的参数 + 'Modifiers'的固定写法titleModifiers?: {default: () => {}}}const propData = defineProps<Props>()console.log(propData.modelModifiers) ===> //{}console.log(propData.titleModifiers) ===> //flag:trueconst emit = defineEmits(['update:modelValue', 'update:title'])const close = () => {console.log(propData.modelModifiers);emit('update:modelValue', false)emit('update:title', '我要改变')
}
更多推荐
vue3学习(十一)
发布评论