vue实现自定义组件的v-model双向数据绑定
如果您发现本文排版有问题,可以先点击下面的链接切换至老版进行查看!!!
vue实现自定义组件的v-model双向数据绑定
<input type="text" v-model="username"> 用户名:{{username}}
其实v-model是一种语法糖,我们要知道它完整的写法才能更好的利用自己vue的理解来深刻理解v-model
上面的语句其本质是下面的:
<input type="text" :value="username" @input="username = $event.target.value"> 用户名:{{username}}
其实我们的自定义组件也是可以实现v-model的,它默认用的属性就是value,事件名为input
Vue.component('child', {
templage: `
<input :value="myName" @input="$emit('input', $event.target.value)"/>
`,
props:['value'] //这个必然是需要的吗
})
在父组件中我们就这么用
<child v-model="userName"></child>
这样的用法适合了解v-model的原理,但是其实一般我们用的不多。怎么说呢,我们一般做项目的时候为用的第三方UI库,一些双向数据绑定什么的做的好好的,但是我们还是经常需要基于这些UI库的组件进行二次封装,那样才能更好的满足自己项目的需要嘛,这时候我们可能需要自己封装组件,把UI库的组件包一下,以element-ui为例(此示例只是用于演示)
Vue.component('child', {
templage: `
<el -cascader
:placeholder="placeholder"
:options="options"
:show-all-levels="false"
@change="handleChangeToInput">
</el>
`,
props: {
options: {
type: Array,
default: function() {
return [];
}
},
placeholder: {
type: String,
default: "请选择"
},
value:[String,Array]
},
handleChangeToInput(value) {
//直接用emit input事件,方便父组件直接使用v-model实现双向数据绑定
this.$emit("input", value);
}
})
element-ui官方给的用法里面写的事件是change事件(源码里面好像有input事件),通过上面的‘二次封装’我们就实现让child组件可以用v-model了
我们可以继续愉快的用
<child v-model="userName"></child>
注:实际上在较新的版本的vue里面已经支持更改v-model默认用的value属性名和input事件名了
- 分类:
- Web前端
更新时间:
相关文章
Vue2.6.10源码分析(一)vue项目怎么神奇的跑起来的
先看index.html的代码吧 <!DOCTYPE html> <html lang="en"> <head> <meta 阅读更多…
2021年的一点工作总结(一)迁移React技术栈
2021年全年的工作总结起来很简单,算是做苦力的一年吧。。。 2021年春节后就开始邮件项目从Vue迁移到React的工作以及富文本编辑器由wangEditor替换成CKEditor。 其实自己 阅读更多…
vue-cli设置css不生效
我们有的项目使用的是老的vue-cli脚手架生成的,今天想写点东西,发现.vue文件里面 style 里面写的样式都不生效了,很自然就想到是不是loader的问题。 在这种项目的webpack.ba 阅读更多…
Vue和React hooks实现Select批量选择、选中条数、全选、反选实现对比
批量选择、全选、反选这些功能使用频率还是很高的,下面直接看看Vue和React分别怎么实现吧。 Vue 在使用Vue的时候是很容易实现的,我们以下列数据格式为例: const data 阅读更多…
Vue在chrome44偶现点击子元素事件无法冒泡
公司的一个项目大致是这样的:一个左侧列表,点击左侧列表的文章标题,右侧展开该文章对应的内容的。 现在的问题出现在极少部分客户有时左侧的标题,无法打开对应的右侧的内容,给人的改进就是‘卡’、点不动、点 阅读更多…
vue内置组件keep-alive源码解析
很简单,我们直接看vue的源码即可。 keep-alive 组件支持三个属性。 props: { include: patternTypes, exclude: patter 阅读更多…