template的形式创建的组件相对于render形式创建的组件来说局限性大一点，render形式创建的组件能很好地展现js的能力。
直接上代码
export default {
name: 'renderComponent',
props: {
componentProps: String
},
data() {
return {
componentMsg: 'componentMsg'
}
},
beforeCreate() {
console.log('beforeCreate')
},
created() {
console.log('created')
},
beforeMount() {
console.log('beforeMount')
},
mounted() {
console.log('mounted')
},
//通过render创建组件而不是通过template。没有:绑定参数的操作而是直接{}绑定参数
render(h) {
console.log('render')
return(
{this.componentMsg}
{//创建新的div节点并且绑定对应的class和style和slot插槽
h(
'div',
{
class: [
!this.componentProps ? 'font-big' : '',
this.componentProps ? 'font-weight' : ''
],
style: { color: 'green' }
},
this.$slots.a
)
}
{this.componentProps}
{
h(
'div',
{
'class': 'font-small',
style: { color: 'pink' }
},
this.$slots.b
)
}
)
}
}
>
render中同样可以定义data绑定class和style加入插槽等等功能，还有生命周期其中的顺序如下
render是介于beforemounted和mounted之前的。
绑定data数据的时候要使用this，以及双花括号绑定现在也变成了单花括号。
render最后必须返回一个用()包起来的且只有一个根div的html模板。
引用import renderComponent from './components/renderComponent.vue'
components: {
renderComponent
},
end！！！
615
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
