在render函数中如何实现v-model

简介: 在render函数中如何实现v-model
export default{
    data(){
        return{
        }
    },
    render(h){
        let that=this;//为了防止this的指向发生改变
        console.log("render中的this", this);//Proxy {}对象
        return h('input',{
            // wa你想咋个命名就怎样
            wa:{
                value: that.value,//获取值
            },
            // 事件on,用来监听input事件
            on:{
                'input':function(event){
                    that.$emit('input',event.target.value)
                }
            }
        }
       );
    }
}


在使用的页面中


import aa from "./myrender"
   <aa v-model="name"></aa>
   {{name}}
  data(){
     return{
         name:"",
     }
  }
 components:{
     aa
 }


1425695-20200305232447599-1671015769.png

相关文章
|
19天前
组件v-model
组件v-model
19 0
|
15天前
|
JavaScript 编译器
组件 v-model
组件 v-model
|
19天前
|
JavaScript 前端开发 API
Vue中v-model的原理
Vue中v-model的原理
|
2月前
v-model绑定vuex的state怎么实现?
v-model绑定vuex的state怎么实现?
|
2月前
|
JavaScript
Vue中的v-model指令的原理是什么?
Vue中的v-model指令的原理是什么?
17 2
|
3月前
|
JavaScript 开发者
Vue中v-model的原理是什么?
Vue中v-model的原理是什么?
20 0
|
4月前
|
JavaScript
Vue中子组件单个双向绑定发送事件使用input,多个使用 update:变量名;父组件接收时,v-model 接收单个,.sync 接收多个(vue3中使用v-model:name的写法)
Vue中子组件单个双向绑定发送事件使用input,多个使用 update:变量名;父组件接收时,v-model 接收单个,.sync 接收多个(vue3中使用v-model:name的写法)
|
5月前
|
JavaScript
【Vue】终结v-model
【Vue】终结v-model
|
前端开发 JavaScript UED
Vue3 你可能忽略的 v-model 用法(一)
Vue3 你可能忽略的 v-model 用法
Vue3 你可能忽略的 v-model 用法(一)