vue零基础开发021——动态组件与v-once指令

作者: 文朝明 | 来源:发表于2019-11-29 15:59 被阅读0次

vue零基础开发021——动态组件与v-once指令
Vue 动态组件与v-once指令
动态组件与v-once指令
动态组件与v-once指令
动态组件与v-once指令
动态组件与v-once指令
动态组件， v-once指令
十一、动态组件与v-once指令
Vue 成长之旅 | Vue基础用法一
VUE03

toggle效果

<head>
    <meta charset="utf-8" />
    <title>动态组件与v-once指令</title>
    <script src="./vue.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="handleBtnClick">change</button>
    </div>
    <script>
        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: {
                handleBtnClick: function () {
                    this.type = this.type === 'child-one' ? 'child-two' : 'child-one'
                }

            }
        })

    </script>
</body>
</html>

【动态组件】

<head>
    <meta charset="utf-8" />
    <title>动态组件与v-once指令</title>
    <script src="./vue.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>-->
        <component :is="type"></component>
        <button @click="handleBtnClick">change</button>
    </div>
    <script>
        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: {
                handleBtnClick: function () {
                    this.type = this.type === 'child-one' ? 'child-two' : 'child-one'
                }

            }
        })

    </script>
</body>
</html>

点击btn

再次点击btn

【v-once指令】在模板中添加v-once指令，可以直接将模板放在内存中，而不去销毁，用的时候直接提出来，相比不断销毁再去创建，提高了性能

<head>
    <meta charset="utf-8" />
    <title>动态组件与v-once指令</title>
    <script src="./vue.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>-->
        <component :is="type"></component>
        <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>