render的使用
Render是使用js的完全编程能力来渲染页面,即用js来构建DOM.说明:render是一个方法,自带一个形参createElement,这个参数也是一个方法,是用来创建vue 节点的,也就是html模板的,然后渲染(render)到指定的节点上。render函数的目的是创建dom节点。因为createElement是个形参,所以这个形参可以用任何字符替换,比如h。createEleme...
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>
更多推荐
所有评论(0)