Vue 动态组件

假设有子组件1 input-item ：

<input />

子组件2 common-item ：

<div>Hello</div>

在父组件中使用两个子组件：

<input-item />
<common-item />

效果如下：

假设现在有这么个需求：一开始只展示子组件 input-item ，同时增加一个按钮，点击就切换成子组件 common-item ，再点击又切换回来。很简单对吧，用 v-show 的方法稍微修改一下父组件就行啦 👇

<input-item v-show="currentItem === 'inputItem'"/>
<common-item v-show="currentItem === 'commonItem'"/>
<button @click="handleClick">切换</button>
export default{
	data() {
		return {
			currentItem: 'input-item'
		}
	},
	methods: {
		handleClick() {
			if (this.currentItem === 'input-item') {
				this.currentItem = 'common-item'
			} else {
				this.currentItem = 'input-item'
			}
			//这里用三元运算符比较简单，为了展示逻辑此处用ifelse语法
		}
	}
}

修改完效果就是这样啦：

点击切换按钮：

再点击也能切换得回去~

那么有没有什么方法让代码更精简些呢？或者是有没有什么方法可以不使用 v-show 来完成呢？当然有啦 ~ 这里需要使用动态组件，让我们再来修改一下父组件代码 👇

<component :is="currentItem"/> //动态组件
<button @click="handleClick">切换</button>
export default{
	data() {
		return {
			currentItem: 'input-item'
		}
	},
	methods: {
		//这里改成用三元运算符的形式
		handleClick() {
            this.currentItem === 'input-item' ? this.currentItem = 'common-item' : this.currentItem = 'input-item'
        }	
	}
}

效果和前面是一模一样的~

拓展： 当我们在一开始的input框输入一些内容后，点击切换按钮切换组件，再点击一次按钮回来，会发现input框中的内容没有了 😒

一、 输入内容

二、点击切换

三、再点击切换

何解？此处使用keep-alive即可 👇

<keep-alive> <!--缓存标签-->
	<component :is="currentItem"/> <!--动态组件-->
</keep-alive>
<button @click="handleClick">切换</button>

总结：动态组件就是根据数据的变化，结合 component 这个标签，来随时动态切换组件的显示