vue3v-model双向数据绑定
时间: 2023-07-26 09:13:09 浏览: 66
在 Vue3 中,v-model 指令的实现与 Vue2 中有所不同。Vue3 中的 v-model 指令是基于组合 API 实现的,它使用了新的 `modelValue` 和 `update:modelValue` 来实现双向数据绑定。
具体来说,当使用 v-model 绑定一个表单控件时,`modelValue` 表示控件的值,`update:modelValue` 表示控件值发生变化时触发的事件。下面是一个示例:
```html
<template>
<input v-model="message"/>
<p>{{ message }}</p>
</template>
<script>
import { ref } from 'vue'
export default {
setup() {
const message = ref('Hello, Vue3!')
return {
message
}
}
}
</script>
```
在这个示例中,我们使用 ref 创建了一个名为 `message` 的响应式数据,然后使用 v-model 将 `message` 绑定到了一个 input 元素上,同时在模板中使用了插值表达式来显示 `message` 的值。这样,当用户在 input 元素中输入内容时,`message` 的值会自动更新,并且视图中的插值表达式也会自动更新。
需要注意的是,在 Vue3 中使用 v-model 绑定一个自定义组件时,需要自定义组件内部实现 `modelValue` 和 `update:modelValue` 的绑定,以实现双向数据绑定。