封装组件v-model的使用

又菜乄又爱玩

于 2022-06-27 15:23:16 发布

阅读量878

点赞数

CC 4.0 BY-SA版权

分类专栏： vue 文章标签：前端 vue.js 前端框架

本文链接：https://blog.youkuaiyun.com/wz_dp/article/details/125484342

vue 专栏收录该内容

1 篇文章

订阅专栏

本文详细介绍了Vue组件中如何自定义v-model的绑定属性和事件，展示了如何通过`model`选项设置`prop`和`event`，并提供了一个示例展示如何在组件内响应v-model变化。通过这种方式，开发者可以更灵活地控制组件的数据双向绑定。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在封装组件时v-model传入的值默认通过value进行接受

export default {

props:{
value：{
type:'String',
default:''
}
}

}

但也可以自己设置一个值进行绑定

model：{
prop：'model',
event:'change'
}
props:{
model:{
type:String,
default:''
}
}

event代表通过什么事件触发，v-model其实是一个语法糖他真正的写法是

<input :value='val' @input='val = val' />

所以将event重新赋值

Vue.component({
model:{
value:'model',
event:'change'
},
props:{
model:''
},
template:'
<input :value=model @input='this.$emit('change',model)'/>
'
})

当触发$emit定义的事件时，会自动改变v-model绑定的值