Vue-动态组件与v-once指令 

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>动态组件与v-once指令</title>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/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>
            <component :is="type"></component>
        </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: {
                    handleBtnClick() {
                        this.type = this.type === 'child-one' ? 'child-two' : 'child-one'
                    }
                }
            })
        </script>
    </body>

</html>

 

posted @ 2019-10-28 20:31  嘆世殘者——華帥  阅读(133)  评论(0)  编辑  收藏  举报