render 实现v-model

更新日期: 2019-10-26阅读: 2.3k标签: render

吐槽一下,官网上的例子不太适用,一般都是从已有的组件上开发了,哪会直接用input来搞,以element-ui为例,演示如何通过render实现v-model

v-model的本质是通过绑定组件的value和input(绝大多数)来实现双向绑定,拆开来是组件的value绑定父组件的data数据,当data数据改变时,组件的value因为被绑定了,所以data的变化会触发value的变化,换个方向,要想组件的value改变了,需要在input事件里通知data,由此改变data,这样就能达到双向绑定的效果。在render里面,从data到组件的value方向绑定比较容易,如果是组件到data,则直接给data赋值更新即可


例子

父组件
let root = {
    data:test,
    render:function(h){
    let self = this;
    return h('el-input',{
         props:{
              // data绑定到value
              value:self.$data.test 
              },
         on:{
             input:function(value){
                   // 拿到data直接赋值
                    self.$data.test = value
                  }
             }
         })
    }
}

new vue(root).$mount(id);

链接: https://www.fly63.com/article/detial/6619

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!