假设有子组件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 这个标签,来随时动态切换组件的显示