如何实现 动态组件 component

场景：

1、父组件 father 、子组件 Left 、子组件 Right

2、在父组件 中分别引入 子组件 Left 和 Right 

父组件 father：

<component :is="componentName"></component>  //  首先通过 component 组件展位 通过 动态 绑定 is 属性值 来确认渲染哪个组件

<button @click="componentName = 'Left">展示 Left 组件</button>  // 添加点击事件 控制 componentName 显示哪个组件

<button @click="componentName = 'Right">展示 Left 组件</button>

import Left from '@/component/Left.vue'

import Right from '@/component/Right .vue' // 引入组件

data() {

        return {

        componentName: 'Left' // 定义默认值

        }

}

component: { Left,Right} // 注册组件