render的使用

Render是使用js的完全编程能力来渲染页面，即用js来构建DOM.

说明：render是一个方法，自带一个形参createElement，这个参数也是一个方法，是用来创建vue 节点的，也就是html模板的，然后渲染(render)到指定的节点上。render函数的目的是创建dom节点。因为createElement是个形参，所以这个形参可以用任何字符替换，比如h。

• createElement:
  createElement接收3个参数：

第一个参数可以是HTML标签名，组件或者函数都可以；此参数是必须的；

第二个为数据对象（可选）；

第三个为子节点（可选）。

需求：子组件根据父组件传入的level值，显示不同的标签

定义子组件：

<template>

  <div>

    <!-- 根据level来显示不同的成绩 -->

   <h1 v-if="level==1">{{msg}}</h1>

   <h2 v-if="level==2">{{msg}}</h2>

   <h3 v-if="level==3">{{msg}}</h3>

   <h4 v-if="level==4">{{msg}}</h4>

  </div>

</template>

<script>

export default {

  name:'Child',

  data(){

    return {

      msg:'这是信息'

    }

  },

  props:{

    level:{

        type:Number,

        default:0

      }

  }

}

</script>

 

 

定义父组件：

<template>

    <div>

        <p>父组件</p>

        <child :level="level"></child>

    </div>

</template>

<script>

import Child from './Child'

export default {

    name:'Parent',

    data(){

return {

    level:2

}

    },

    components:{

        Child

    }

}

</script>

<style>

 

</style>

 

 

效果图为：

由此可看到，虽然功能实现了，但是子组件中的代码不简洁。下面是使用render函数来实现，

定义子组件：

 

 

 

<script>

export default {

  name:'Child',

  data(){

    return {

      msg:'这是信息'

    }

  },

  props:{

    level:{

        type:Number,

        default:0

      }

  },

 render(h){

  return h('h'+this.level,{

    style:{

      color:'red'

    },

    on:{

      click:()=>{

        console.log('点击事件')

      }

    }

  },this.msg)

 }

}

</script>

 

父组件不变，效果图为：

功能已经实现，子组件中的代码非常简洁。

解析：render函数的参数是一个函数，通常以h来代替此函数，h函数有3个参数，参数1是标签，参数2是该标签的相关属性，参数3是标签内的内容。
以下组件是利用render渲染列表

<script>

export default {

  name: "Child",

  props: {

    items: {

      type: Array

    }

  },

  render(h) {

    if (this.items.length > 0) {

      return h(

        "ul",

        this.items.map(item => {

          return h("li", item);

        })

      );

    } else {

      return h('p','no found')

    }

  }

};

</script>

vue2.0里面的写法

render: h => h(App)

等价于

render:function(h){

return h(App);

}

也等价于

render:function(createElement){

return createElement(App)

}

关于render,还可以绑定其他属性：详情请查看vue的render介绍。

再看下面的例子：

定义子组件：

<script>
export default {
  name: "Child",
  data() {
    return {
      count: 0
    };
  },
  methods:{
    add(){
        this.count++;
    }
  },
  render(h) {
    return h(
      "button",//第一个参数是元素的名字
      {//第二个参数是数据对象，可绑定class/id/attr/style/事件等
        class: {
          foo: true,
          bar: false
        },
        attrs: {
          id: "foo"
        },
        props: {
          myProp: "bar"
        },
        style: {
          color: "red"
        },
        on: {
          click: this.add
        }
      },
      `点击了我${this.count}次`//第三个参数是显示在元素里面的内容
    );
  }
};
</script>

定义父组件：

<template>
    <div>
	<p>我是父组件</p>
	<One/>
	</div>
</template>
<script>
import One from './One.vue'
export default {
	name: 'Parent',
	data(){
		return{
		}
	},
	components:{
		One
	}
}
</script>
<style>
	button{
		margin-top:10px;
	}
</style>

效果图：

注意：用render时，若内容里面有data对象里面的数据，需使用`变量名是${userName}`这种写法。

在main.js中注册全局组件，组件使用render:

Vue.component('sayHello',{
	render(h){
		  return h('p',{
			  style:{
				  color:'red'
			  }
		  },`早上好,${this.userName}`)//格式是`${this.userName}`
		},
	data(){
		return{
			userName:'小明'
		}
	}
})

其他组件使用sayHello组件：

<template>
  <div>
    <h3>这里是父组件</h3>
	<sayHello></sayHello>
  </div>
</template>
<script>
export default {
  name: "Parent",
  data() {
    return {}
  }
};
</script>