Vue3 defineModel的使用示例详解
作者：啥也不会啥都白费
文章介绍了vue中向子组件传值并允许修改的机制,通过defineModel实现双向绑定,它返回一个ref,并且可以配置底层prop的选项,本文结合实例代码给大家介绍的非常详细,感兴趣的朋友跟随小编一起看看吧
基础配置使用
在vue中，父组件可以在子组件上传值，子组件通过props接收，但是子组件不可修改props，否则控制台会报出警告，这也符合vue的单向数据流原则，所以如果想要向子组件传值，并且允许子组件修改的话，一般会这么写：
<!-- Child.vue -->
<script setup>
const props = defineProps(['modelValue'])
const emit = defineEmits(['update:modelValue'])
</script>
<template>
<input
:value="props.modelValue"
@input="emit('update:modelValue', $event.target.value)"
/>
</template>在父组件调用
<!-- Parent.vue --> <Child :modelValue="foo" @update:modelValue="$event => (foo = $event)" />
而在vue3中，声明了一种新的传值方式defineModel,可以更方便的向子组件传值，并且允许子组件修改传值,以实现双向绑定.
<!-- Child.vue -->
<script setup>
const model = defineModel()
function update() {
model.value++
}
</script>
<template>
<div>Parent bound v-model is: {{ model }}</div>
<button @click="update">Increment</button>
</template>父组件
<!-- Parent.vue --> <Child v-model="countModel" />
defineModel() 返回的值是一个 ref。它可以像其他 ref一样被访问以及修改，不过它能起到在父组件和当前变量之间的双向绑定的作用：
- 它的 .value 和父组件的 v-model 的值同步；
- 当它被子组件变更了，会触发父组件绑定的值一起更新。
defineModel允许配置，可以通过给 defineModel 传递选项，来声明底层 prop 的选项：
// 使 v-model 必填
const model = defineModel({ required: true })
// 提供一个默认值
const model = defineModel({ default: 0 })需要注意的是：如果为 defineModel prop 设置了一个 default 值且父组件没有为该 prop 提供任何值，会导致父组件与子组件之间不同步。
<!-- Child.vue -->
const model = defineModel({ default: 1 })
<!-- Parent.vue -->
const myRef = ref()
<Child v-model="myRef"></Child>上述代码中，父组件的 myRef 是 undefined，而子组件的 model 是 1，所以如果设置初始值,应保持二者一致。
配置参数，绑定多个v-model
组件上的 v-model 也可以接受一个参数：
<MyComponent v-model:title="bookTitle" />
<!-- MyComponent.vue -->
<script setup>
const title = defineModel('title')
</script>
<template>
<input type="text" v-model="title" />
</template>如果需要额外的 prop 选项，应该在 model 名称之后传递：
const title = defineModel('title', { required: true })绑定多个v-model
<UserName v-model:first-name="first" v-model:last-name="last" />
<script setup>
const firstName = defineModel('firstName')
const lastName = defineModel('lastName')
</script>
<template>
<input type="text" v-model="firstName" />
<input type="text" v-model="lastName" />
</template>到此这篇关于Vue3 defineModel的使用示例详解的文章就介绍到这了,更多相关Vue3 defineModel使用内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！