vue在render函数中如何实现v-model和事件绑定(4)

1.h函数的三个参数

第一个参数是必须的。
类型:{String | Object | Function} 
一个 HTML 标签名、一个组件、一个异步组件、或一个函数式组件。
是要渲染的html标签。
第一个参数div  是表示创建一个div的元素

第二个参数是可选的。
类型:{Object} 主要是当前html中的各种属性。
如attrs,class,style等
在开发时。建议传,实在没有传的时候,传入 null


第三个参数可选的。
类型:{String | Array | Object} children
虚拟子节点(vnodes),当前html标签的元素。
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
 }

posted @ 2020-03-05 23:25  南风晚来晚相识  阅读(5816)  评论(0编辑  收藏  举报