<script>
export default {
data () {
return {
item: ['张三','李四','小明']
}
},
// 在组件中使用,去除组件中的template标签 (组件中的template标签中的内容编译时最终都会编译成render函数)
// createElement参数配置请看vue官网 https://cn.vuejs.org/v2/guide/render-function.html
/*
createElement();
第一个参数(必要参数):主要用于提供dom的html内容,类型可以是字符串、对象或函数
第二个参数(类型是对象,可选):用于设置这个dom的一些样式、属性、传的组件的参数、绑定事件之类
第三个参数(类型是数组,数组元素类型是vnode,可选):主要是指该结点下还有其他结点,用于设置分发的内容,包括新增的其他组件。注意,组件树中的所有vnode必须是唯一的
*/
render: function (h) {
console.log(h);
// return createElement(
// "div",
// {},
// this.item.map(name => {
// return createElement('span', {
// class: 'box',
// on: {
// click: this.handlerClick
// }
// }, name);
// })
// );
// jsx写法
return (
<div class={'box'} onclick={this.handlerClick}>
{ this.item.map(name => { return <span>{ name }</span> }) }
</div>
)
},
methods: {
handlerClick() {
console.log('click');
}
}
};
</script>
<style scoped>
.box {
color: red;
font-size: 50px;
display: block;
}
</style>
页面显示
createElement传入一个组件
<script>
import msg from "./components/msg.vue";
export default {
render: function (h) {
console.log(h);
// createElement第一个参数也可以传入一个组件
// return h(msg, {
// props: {
// msg1: 'css',
// msg2: 'html',
// msg3: 'javascript',
// },
// });
// jsx写法
return (
<msg msg1={'css'} msg2={'html'} msg3={'javascript'} />
)
},
};
</script>
<template>
<ul>
<li>{{ msg1 }}</li>
<li>{{ msg2 }}</li>
<li>{{ msg3 }}</li>
</ul>
</template>
<script>
export default {
props: {
msg1: String,
msg2: String,
msg3: String,
}
}
</script>
<style scoped>
li {
font-size: 50px;
color: red;
}
</style>
页面显示
render函数使用场景
<template>
<div>
<level :level="1">hello world1</level>
<level :level="2">hello world2</level>
<level :level="3">hello world3</level>
<level :level="4">hello world4</level>
<level :level="5">hello world5</level>
<level :level="6">hello world6</level>
</div>
</template>
<script>
import Level from './components/level.vue'
export default {
components: {
Level
}
};
</script>
<style scoped>
</style>
<script>
export default {
props: {
level: Number
},
render: function (h) {
console.log(h);
console.log(this.$slots);
// return createElement(`h${this.level}`, this.$slots.default, );
// jsx写法
const tag = `h${this.level}`;
return (
<tag>
{ this.$slots.default }
</tag>
)
}
}
</script>
页面显示