在vue中使用component配合v-show切换组件

15 篇文章 1 订阅
13 篇文章 0 订阅
<component
				v-show="state.showHide.reportFormsShows"
				:is="state.componentName"// 这个是切换组件名称的
				:item="state.operItem"
				:name="state.operItemName"
				@eventTransmission="getSondata"
			></component>
setup() {
		const state = reactive({
			showHide: {
				reportFormsShows: false,
			},
<el-button size="small" @click="deliveryConfiguration(item,'formsEmail')">投递</el-button>
<el-button size="small" @click="timingConfiguration(item,'formsTimer')">定时</el-button>
function templateselection(item:any,componentSwitching:any){
		   state.componentName = componentSwitching
		   state.showHide.reportFormsShows = true;
		}
		function deliveryConfiguration(item:any,componentSwitching:any){
           state.componentName = componentSwitching
		   state.showHide.reportFormsShows = true;
		}
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
v-if和v-show是Vue.js用于条件渲染的指令,它们的作用是根据条件来控制组件的显示和隐藏。v-if是根据条件动态地添加或移除DOM元素,而v-show则是通过修改元素的display属性来控制显示和隐藏。\[1\] v-if在切换组件时会完全销毁和重建组件,这意味着每次切换都会重新渲染组件及其子组件,对性能有一定的影响。而v-show只是通过修改display属性来控制组件的显示和隐藏,不会销毁和重建组件,因此在频繁切换组件的位置时,推荐使用v-show,因为它的性能更好。\[1\] 然而,使用v-show也可能会遇到一些问题。例如,在使用echarts图表时,如果使用v-show来控制图表的显示和隐藏,可能会出现图表未获取到最外层大盒子的宽度而显示不完整的情况。这是因为v-show只是修改了display属性,而没有重新渲染组件,导致图表无法正确获取到容器的宽度。\[3\] 为了解决这个问题,可以在切换组件使用$nextTick方法来延迟执行获取echarts的option的方法,确保图表能够正确获取到容器的宽度。同时,也可以使用watch监听tab切换的事件,在切换后执行相应的方法来更新图表。\[2\] 综上所述,v-if和v-show在切换组件时有不同的特点和适用场景。v-if适用于需要频繁销毁和重建组件的情况,而v-show适用于频繁切换组件位置的情况。在使用v-show时,需要注意处理图表等需要获取容器宽度的情况,可以使用$nextTick和watch来解决相关问题。 #### 引用[.reference_title] - *1* [关于Vue组件切换【v-if、v-show、template、component】](https://blog.csdn.net/qq_22841387/article/details/123942022)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* [Vuev-show/v-if切换后echarts宽高问题和不显示问题](https://blog.csdn.net/Igiveufireworks/article/details/126647504)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] - *3* [v-show,v-if切换组件echarts显示不全的问题](https://blog.csdn.net/weixin_42038290/article/details/125865493)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值