场景前提
我们知道Vue.component使用直接注册组件,并在<template></template>里面直接使用的。但如果不是直接在<template></template>里面使用,而是根据组件名称自动渲染的页面呢
这个时候我们就可以直接通过Vue.component的render方法来实现
render又有两种实现方式:
1、一种是基于vue官方文档的createElement方法实现
2、一种是直接返回jsx的方式实现的
使用
1、基于createElement方法实现
// test是需要添加到自动渲染页面的组件名称数组中
vue.component('test',{
render(createElement){
// button 是已注册过的组件
return createElement('button',{
on:{
click:function(){
alert(123)
}
}
})
}
}
2、通过jsx方式实现
// test是需要添加到自动渲染页面的组件名称数组中
vue.component('test',{
render(){
// button 是已注册过的组件
return (<button onClick={()=>{alert(123)}}></button>)
}
}