道招

vue实现自定义组件的v-model双向数据绑定

如果您发现本文排版有问题,可以先点击下面的链接切换至老版进行查看!!!

vue实现自定义组件的v-model双向数据绑定

一般来说我们用v-model是在input中 常见用法如下
<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事件名了
更新时间:
上一篇:前端面试题 小明早餐午餐晚餐下一篇:element-ui动态表单async-validate校验 please transfer a valid prop path to form item!

相关文章

element-ui表单源码解析之el-input

关于表单校验el-input做的主要工作就是跟el-form-item交互,把input的相关事件发送给el-form-item,上一篇已经讲到在el-form-item的mounted的生命周期里 阅读更多…

Vue同一路由跳转页面不刷新解决方案及注意事项之二

之前写过一个 《Vue同一路由跳转页面不刷新解决方案及注意事项》 ,在这篇文章里面鞋到了怎么解决这个问题,具体内容可以点击查看,这里简单说一下,就是利用将时间戳传给路由的query,也就导致 $ro 阅读更多…

Vue在chrome44偶现点击子元素事件无法冒泡

公司的一个项目大致是这样的:一个左侧列表,点击左侧列表的文章标题,右侧展开该文章对应的内容的。 现在的问题出现在极少部分客户有时左侧的标题,无法打开对应的右侧的内容,给人的改进就是‘卡’、点不动、点 阅读更多…

从vuecli3学习webpack记录(一)vue-cli-serve机制

最近看了看vuecli3,把自己的学习记录下来。 首先看入口 npm run dev 即是 vue-cli-service serve ,之所以能运行 vue-cli-service 命令,就是 阅读更多…

vue-cli设置css不生效

我们有的项目使用的是老的vue-cli脚手架生成的,今天想写点东西,发现.vue文件里面 style 里面写的样式都不生效了,很自然就想到是不是loader的问题。 在这种项目的webpack.ba 阅读更多…

用在线IDE写vue代码

上周末无意中发现了一个新的在线IDE,网址glitch.com,个人感觉很不错,于是顺便关注了下其它的在线IDE,比如codesandbox.io也不错,没有细看,可能自己已经先入为主的喜欢上glit 阅读更多…

关注道招网公众帐号
友情链接
消息推送
道招网关注互联网,分享IT资讯,前沿科技、编程技术,是否允许文章更新后推送通知消息。
允许
不用了