@fightingWC (fightingWC) posted a new topic, subject "Vue component 组件，切换问题". It read:

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

So @huanghuang (黄煌) replied

    可以的，从官方的API上面有说明，是允许接收组件实例的。  
    所以当你想再次给compName赋值comp1时，你手动new一个实例即可。  
    相关API：  
    cn.vuejs.org
    
    ### API — Vue.js
    
    Vue.js - The Progressive JavaScript Framework

@fightingWC (fightingWC) replied

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

To which @huanghuang (黄煌) replied

    cn.vuejs.org
    
    ### API — Vue.js
    
    Vue.js - The Progressive JavaScript Framework
    
      
    import comp from ‘**'  
    const Profile = Vue.extend(comp)  
    const comp1 = new Profile()

To which @fightingWC (fightingWC) replied

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

To which @fightingWC (fightingWC) replied

    import Comp1 from ‘./comp1.vue'  
    且Comp1在父组件的components属性下，注册过
    
    父组件  
    export default {  
    data() {  
    return {  
    currentComp: “”  
    }  
    },  
    components: {  
    Comp1  
    }  
    }
    
    一:方式一  
    方式一的写法是ok的  
    this.currentComp = Comp1;  
    
    
    二:方式二  
    当按照下面这种方式使用的时候，没有报错，但是不work，界面上啥也没有  
    let Constuctor = Vue.extend(Comp1);  
    let newComp1 = new Constuctor();  
    this.currentComp = newComp1;  
    
    
    三:方式三  
    方式二不work，猜想是由于动态创建了新组建newComp1，没有在父组件注册过，所以不work  
    于是再次注册该组件，仍然不work
    
    let Constuctor = Vue.extend(Comp1);  
    let newComp1 = new Constuctor();  
    this.currentComp = newComp1;  
    //再次注册该组件  
    Vue.component(“Comp1”, currentComp);

After which, @fightingWC (fightingWC) added

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

@huanghuang (黄煌) replied

    二:方式二  
    当按照下面这种方式使用的时候，没有报错，但是不work，界面上啥也没有  
    let Constuctor = Vue.extend(Comp1);  
    let newComp1 = new Constuctor();  
    this.currentComp = newComp1;
    
    你需要配合动态组件渲染出来呀  
    <component :is=“currentComp”></component>

So @daixeibing (xiaowu) replied

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

Then @daixeibing (xiaowu) said

    

After which, @dclovec (robin chen) added

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


{'source': 'discourse', 'url': 'https://forum.vuejs.org/t/vue-component/64860', 'title': 'Vue component 组件，切换问题', 'views': 47920, 'has_accepted_answer': False, 'word_count': 185, 'like_count': 0, 'reply_count': 8, 'participant_count': 4, 'posts': 11, 'tags': 'vue-core', 'author': '@fightingWC (fightingWC)', 'participants': '@fightingWC (fightingWC), @huanghuang (黄煌), @daixeibing (xiaowu), @dclovec (robin chen)', 'image_url': [None], 'created_at': '2019-05-28T11:19:44.656Z', 'last_posted_at': '2021-08-20T08:58:10.474Z'}