动态组件与v-once指令-创新互联

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script src="./vue.js"></script>
    <!-- <script src="http://cdn.staticfile.org/vue/2.6.10/vue.common.dev.js"></script> -->
</head>
<body>
<div id="root">
    <child-one v-if="type == 'child-one'"></child-one>
    <child-two v-if="type == 'child-two'"></child-two>

    <button @click="handleButtonClick">change</button>
</div>
<script type="text/javascript">
    Vue.component("child-one", {
        template: `<div>child-one</div>`
    });

    Vue.component("child-two", {
        template: `<div>child-two</div>`
    });

    var vm = new Vue({
        el: "#root",
        data: {
            type: "child-one"
        },
        methods: {
            handleButtonClick: function() {
                this.type = (this.type == "child-one" ? "child-two" : "child-one");
            }
        }
    })
</script>
</body>
</html>

同样的效果，使用动态组件(点击切换会销毁一个组件，创建另一个组件。很显然，这样对性能是有损耗的)：

创新互联拥有网站维护技术和项目管理团队，建立的售前、实施和售后服务体系，为客户提供定制化的成都网站制作、成都网站建设、外贸营销网站建设、网站维护、四川服务器托管解决方案。为客户网站安全和日常运维提供整体管家式外包优质服务。我们的网站维护服务覆盖集团企业、上市公司、外企网站、商城系统网站开发、政府网站等各类型客户群体，为全球1000多家企业提供全方位网站维护、服务器维护解决方案。

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script src="./vue.js"></script>
    <!-- <script src="http://cdn.staticfile.org/vue/2.6.10/vue.common.dev.js"></script> -->
</head>
<body>
<div id="root">
    //当然还可以用动态组件的方式(vue自带的标签，它指的就是一个动态组件)。动态组件的意思是：它会根据:is里面数据的变化自动加载不同的组件：
    <component :is="type"></component>

    <button @click="handleButtonClick">change</button>
</div>
<script type="text/javascript">
    Vue.component("child-one", {
        template: `<div>child-one</div>`
    });

    Vue.component("child-two", {
        template: `<div>child-two</div>`
    });

    var vm = new Vue({
        el: "#root",
        data: {
            type: "child-one"
        },
        methods: {
            handleButtonClick: function() {
                this.type = (this.type == "child-one" ? "child-two" : "child-one");
            }
        }
    })
</script>
</body>
</html>

为了解决频繁销毁-创建，可以用v-once(因为这个v-once，在切换的时候会把要销毁的这个放内存里了。也就是不需要创建了，直接从内存里拿)

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script src="./vue.js"></script>
    <!-- <script src="http://cdn.staticfile.org/vue/2.6.10/vue.common.dev.js"></script> -->
</head>
<body>
<div id="root">
    <!-- <child-one v-if="type == 'child-one'"></child-one>
    <child-two v-if="type == 'child-two'"></child-two> -->

    //当然还可以用动态组件的方式(vue自带的标签，它指的就是一个动态组件)。动态组件的意思是：它会根据:is里面数据的变化自动加载不同的组件：
    <component :is="type"></component>

    <button @click="handleButtonClick">change</button>
</div>
<script type="text/javascript">
    Vue.component("child-one", {
        template: `<div v-once>child-one</div>`
    });

    Vue.component("child-two", {
        template: `<div v-once>child-two</div>`
    });

    var vm = new Vue({
        el: "#root",
        data: {
            type: "child-one"
        },
        methods: {
            handleButtonClick: function() {
                this.type = (this.type == "child-one" ? "child-two" : "child-one");
            }
        }
    })
</script>
</body>
</html>

另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。

文章名称：动态组件与v-once指令-创新互联
网站路径：https://www.cdcxhl.com/article16/gggdg.html

成都网站建设公司_创新互联，为您提供App设计、企业建站、Google、动态网站、网页设计公司、电子商务

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容