关于vue的组件重新加载

因为项目样式的问题,所以没有选择去使用路由跳转,而是在一个页面当中import。

这样随之而来的问题就是进来默认加载造成的页面非常卡...

那么想了一个办法解决这个问题

利用组件重新加载 详细 > 传送门

最开始是 定义一个数组 push数据,然后遍历,如果有的话返回个true给组件上面的v-if显示数据。

这是我的代码。(修改前)

<a @click="clickADD(3)"><li><span>首页</span></li></a>
<a @click="clickADD(4)"><li><span>信息</span></li></a>

<Test03 v-if="StateCheck(3)" />
<Test04 v-if="StateCheck(4)" />

function

<script>
import Test03 from '@/components/Test/Test03'
import Test04 from '@/components/Test/Test04'
export default {
  name: "Index",
  components: {
    Test03,
    Test04,
  },
  data(){
	  return{
		  ShowState:[],
	  }
  },
  methods:{
	  clickADD(item){
		  this.ShowState.push(item);
	  },
	  StateCheck(item){
		  for(let i = 0 ; i < this.ShowState.length ; i++){
			  if(this.ShowState[i] == item)	return true;
		  }
		  return false;
	  }
  },
};
</script>

这样子的弊端是,首次加载效果比较好,如果是数据需要进入一次刷新一次的就不是特别的好了。所以我修改了一下代码

(因为项目上了ts 所以用的 ts语法 还加了setup)请按需修改

<a @click="clickADD(3)"><li><span>首页</span></li></a>
<a @click="clickADD(4)"><li><span>信息</span></li></a>

<Test03 v-if="testState3" />
<Test04 v-if="testState4" />

 function

<script lang="ts" setup>
    import Test03 from '@/components/Test/Test03.vue'
    import Test04 from '@/components/Test/Test04.vue'
	import { nextTick,ref } from 'vue-demi';
	
	let testState3:any = ref(false);
	let testState4:any = ref(false);

	function clickADD(item:Number){
		eval("testState"+item+".value=false")
		nextTick(function () {
            eval("testState"+item+".value=true") // 重新加载组件.
        }) 
	}
</script>

这样子点对应的导航会重新加载一次组件。

提供一个可行的思路。如果还有更简单的方法戳我!

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值