vue使用jsx写法如何实现动态组件功能?
vue的内置组件component不能在jsx中使用,本案例给出替代方案
·
什么是动态组件?
已知在template写法中,动态组件是这么写的
<component :is="currentTabComponent" />
如果换成jsx想当然的会写成这样
<component is={this.currentTabComponent} />
这样会直接报错
Unknown custom element: <component> - did you register the component correctly……
所以这里换一种方式
方案1:用switch case方式
currentTabComponent='a'
handleChange(name){
this.currentTabComponent=name;
}
dynaComponent(){
switch(this.currentTabComponent){
case 'a':
return <a/>
case 'b':
default:
return <b/>
}
}
render(){
return (
<div>
<button onclick={()=>{this.handleChange('a')}}>a</button>
<button onclick={()=>{this.handleChange('b')}}>b</button>
{this.dynaComponent()}
</div>
);
}
此写法也可以嵌套在keep-alive中
例如
<keep-alive>
{this.dynaComponent()}
</keep-alive>
方案2:使用createElement函数
在jsx中,render()带一个可选参数,这个参数就是createElement函数
关于createElement函数
示例:
currentTabComponent='a'
handleChange(name){
this.currentTabComponent=name;
}
render(h){
return (
<div>
<button onclick={()=>{this.handleChange('a')}}>a</button>
<button onclick={()=>{this.handleChange('b')}}>b</button>
{h(this.currentTabComponent)}
</div>
);
}
以上。
更多推荐
已为社区贡献3条内容
所有评论(0)