如何实现 动态组件 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} // 注册组件