尝试一次又一次停止加载相同的组件

Question

关于代码

使用laravel 5.8和vue.js组件。

发行详细信息

有3个选项卡。当我单击组件1时，它会加载。然后，我单击组件2，加载。到目前为止，一切都还好。

当我返回组件1时，它会再次加载组件。这里的问题是有验证码从服务器再次获取响应代码，因为该组件每次都在单击选项卡时加载。

我可以停止第一次加载组件加载吗？我的意思是，我只想重复使用已加载的HTML。

主组件

<template>    
    <div class="container-fluid">
        <b-tabs pills card vertical>
            <b-tab title="Main" active>
                <profile></profile>
            </b-tab>
            <b-tab title="Comp 1" @click="setComponent('comp1')">
                <component :is = "comp1"></component>
            </b-tab>
            <b-tab title="Comp 2" @click="setComponent('comp2')">
                <component :is = "comp2"></component>
            </b-tab>
        </b-tabs>
    </div>
</template>
<script>        
    export default {
        methods: {
            setComponent(name) {
                if(name == "comp1") {
                    this.comp1 = name;
                }
                else {
                    this.comp2 = name;
                }
            }
        },
        data() {
            return {   
                comp1: '', comp2: ''
            }
        }
    }
</script>

组件-Comp 1

<template>    
    <div class="container">
        Comp 1 rendered
        <vue-recaptcha  
            :sitekey="My Site Key"> 
        </vue-recaptcha> 
    </div>
</template>

组件-Comp 2

<template>    
    <div class="container">
        Comp 2 Rendered
        <vue-recaptcha  
            :sitekey="My Site Key"> 
        </vue-recaptcha> 
    </div>
</template>

Answer 1

您可以添加 keep-alive，使组件不会被破坏重新创建

<div class="container-fluid">
    <keep-alive>
        <b-tabs pills card vertical>
            <b-tab title="Main" active>
                <profile></profile>
            </b-tab>
            <b-tab title="Comp 1" @click="setComponent('comp1')">
                <component :is = "comp1"></component>
            </b-tab>
            <b-tab title="Comp 2" @click="setComponent('comp2')">
                <component :is = "comp2"></component>
            </b-tab>
        </b-tabs>
    </keep-alive>
</div>

之后，您将在两个子组件中有两个新钩子，激活和停用。