vue2.x 版本 jsx问题

Question

jsx中怎么使用component组件，类似下面的写法的 componentData 为布局组件，动态引入的。

<component :is="componentData"  />

如何返回多个节点还是必须要一个根节点

Answer 1

jsx就用jsx的写法

import ComponentA from './components/ComponentA.vue'
import ComponentB from './components/ComponentB.vue'

export default {
  name: 'App',
  components: {
    ComponentA,
    ComponentB
  },
  data: () => ({
    componentName: 'ComponentA'
  }),
  methods: {
    changeComponent() {
      this.componentName = this.componentName == 'ComponentA' ? 'ComponentB' : 'ComponentA';
    }
  },
  render() {
    const Component = this.componentName == 'ComponentA' ? ComponentA : ComponentB;
    return <div>
      <Component />
      <button onClick={this.changeComponent}>change</button>
    </div>
  }
}