18910140161

Vue component 组件,切换问题

顺晟科技

2021-08-29 12:20:59

148

vue使用component动态组件来切换不同模板:如果当前的组件名称是comp1(也就是compName的值是comp1), 当我想再次给compName赋值comp1时,该组件没有销毁,而是被复用了,能否强制重新创建一个组件,只要compName被重新赋值,就创建(不管compName的值是否发生变化)


顺晟科技:

1、经过测试is接收的是构造器,不能接收对象;2、使用key可以解决以上需求:this.currentComp = Comp1;

使用的是单文件组件,用import导入,如何new

你需要配合动态组件渲染出来呀<component :is=“currentComp”></component>

请问大神,到底该如何使用才是正确的,能达到我想要的效果!!!

三:方式三方式二不work,猜想是由于动态创建了新组建newComp1,没有在父组件注册过,所以不work于是再次注册该组件,仍然不work

二:方式二当按照下面这种方式使用的时候,没有报错,但是不work,界面上啥也没有let Constuctor = Vue.extend(Comp1);let newComp1 = new Constuctor();this.currentComp = newComp1;

cn.vuejs.org
API — Vue.js

Vue.js - The Progressive JavaScript Framework

一:方式一方式一的写法是ok的this.currentComp = Comp1;

let Constuctor = Vue.extend(Comp1);let newComp1 = new Constuctor();this.currentComp = newComp1;//再次注册该组件Vue.component(“Comp1”, currentComp);

可以使用v-if进行重渲染,先设置为false,组件会卸载,然后nextTick再设置为true,就重新渲染了

可以的,从官方的API上面有说明,是允许接收组件实例的。所以当你想再次给compName赋值comp1时,你手动new一个实例即可。相关API:

cn.vuejs.org
API — Vue.js

Vue.js - The Progressive JavaScript Framework

父组件export default {data() {return {currentComp: “”}},components: {Comp1}}

import Comp1 from ‘./comp1.vue’且Comp1在父组件的components属性下,注册过

二:方式二当按照下面这种方式使用的时候,没有报错,但是不work,界面上啥也没有let Constuctor = Vue.extend(Comp1);let newComp1 = new Constuctor();this.currentComp = newComp1;

ok,谢谢大哥,很好的解决了我的问题

相关文章
我们已经准备好了,你呢?
2024我们与您携手共赢,为您的企业形象保驾护航