动态组件与 v-once 指令 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动态组件与 v-once 指令</title>
    <script src="./vue.js"></script>
</head>
<body>
    <div id="root">
        <!--动态组件-->
        <!--<component :is="type"></component>-->

        <!--常规写法 耗费点性能-->
        <!--v-once 做个标识 放在内存中，并不销毁再创建 性能会高一些 提高静态资源的展示效率-->
        <child-one v-if="type==='child-one'"></child-one>
        <child-two v-if="type==='child-two'"></child-two>
        <button @click="handleBtnClick">change</button>
    </div>
    <script>
        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:{
                handleBtnClick:function () {
                    this.type = this.type === 'child-one' ?
                        'child-two':'child-one'
                }
            }
        })
    </script>
</body>
</html>

 

posted @ 2018-11-23 11:15  alexbiu  阅读(170)  评论(0)    收藏  举报