关于vue的组件重新加载
因为项目样式的问题,所以没有选择去使用路由跳转,而是在一个页面当中import。这样随之而来的问题就是进来默认加载造成的页面非常卡...那么想了一个办法解决这个问题利用组件重新加载 详细 > 传送门最开始是 定义一个数组 push数据,然后遍历,如果有的话返回个true给组件上面的v-if显示数据。这是我的代码。(修改前)function这样子的弊端是,首次加载效果比较好,如果是数据需要进入一次刷
·
因为项目样式的问题,所以没有选择去使用路由跳转,而是在一个页面当中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>
这样子点对应的导航会重新加载一次组件。
提供一个可行的思路。如果还有更简单的方法戳我!
更多推荐
已为社区贡献4条内容
所有评论(0)