vue组件基础

动态组件与v-once

点击按钮实现child-one与child-two互换

<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>

动态组件

<div id="root">
        <component :is="type"></component>
        /*根据is里面数据（type）的变化自动加载不同的组件（child-one/child-two）*/
        <button @click="handleBtnClick">Change</button>
    </div>
    <script>
        Vue.component('child-one', {
            template: '<div v-once>child-one</div>'
                /*v-once只渲染元素和组件一次。随后的重新渲染，元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能。*/
        })
        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>

v-once渲染一次后，把组件存到内存里，第二次渲染直接从内存中取用，提高静态内容的展示效率。没有v-once则每次渲染都是重新创建，结束又立即销毁