Vue.js学习（一）：用render函数渲染组件

￡神魔★判官ぃ 2022-06-02 05:10 842阅读 0赞

这里通过一个完整的例子对render函数的用法和注意事项进行说明：

HTML：

<div id="app"> <demo :level="1"><p>我的自定义p标签中的内容</p>asdsa</demo>  </div>

Css：

.c{ background: red; }

JavaScript：

Vue.component('demo',{ render: function (createElement) { var self=this var input=createElement('input',{ //由于render函数中并没有v-model的API，因此，这里只能靠自己实现相应的逻辑，此处引用手册中的例子 attrs:{ type:'text' }, domProps:{ value: self.value }, on:{ input:function(event){ self.value=event.target.value; self.$emit('input',event.target.value) } } },this.$slots.default); var alink=createElement('a',{
     attrs:{ name:'link', href:'myHref' } },this.$slots.default); return createElement('h'+this.level,{//以下是createElement（tag, {}, String）函数的中的第二个参数，通常是可以省略的，更多的参数请设置参考手册 style:{ color:'yellow'//直接设置style样式 }, class:{ c:true//引用css中设置的class样式 }, attrs:{ id:'foo',
     name:'myname' }, props:{//属性，可以参见vue组件中属性的设置 ky:{ type:Number, default: 1 } }, /*domProps:{ innerHTML:'我的内容'//这里会取代分发的slot内容 },*/ on:{//事件绑定 '~click':function(){//~表示once,只调用一次，更多事件修饰符请参见手册 console.log('onceClick') } }, nativeOn:{//用于监听原生事件 click:function(){
     console.log('nativeOn') } }, slot:'myslot' },[input,alink])//此处记得一定要中括号，即便只有一个 }, props:{ level:{ type:Number, required: true, default: 2//这里设置了默认值2，但是小编尝试将html中:level省略，虽然可以按照'h2'标签正常显示，但是控制台仍然报错 } }})let vm=new Vue({ el:'#app'})
     
     
     
     
     
    下图为上述实例的显示情况：
     
     
     下图为上述的标签情况：
     
     若设置了innerHTML，则显示为下图的情况：