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

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

大杯美式不加糖

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值