Vue 动态组件

 Vue 动态组件

 Vue动态组件, 提供了一个特殊的元素<component>用来动态地挂载不同的组件，使用is特性来选择要挂载的组件。

<div id="app">
    <comment :is="currentView"></comment>
    <button @click="handleChangeView('A')">切换A</button>
    <button @click="handleChangeView('B')">切换B</button>
    <button @click="handleChangeView('C')">切换C</button>
</div>

 var app = new Vue({
        el: '#app',
        data: {
            currentView: 'comA'
        },
        components: {
            comA: {
                template: `<div>组件A</div>`
            },
            comB: {
                template: `<div>组件B</div>`
            },
            comC: {
                template: `<div>组件C</div>`
            },
        },
        methods: {
            handleChangeView: function (component) {
                this.currentView = 'com' + component;
            }
        }
    });

$nextTick：

<div id="app2">
    <div id="div" v-if="showDiv">这是一段文本</div>
    <button @click="getText">获取div内容</button>
</div>

var app2 = new Vue({
        el: '#app2',
        data: {
            showDiv: false
        },
        methods: {
            getText: function () {
                // div还没被创建出来
                this.showDiv = true;
                // $nextTick就是来知道什么时候DOM更新完成
                this.$nextTick(function () {
                    var text = document.getElementById('div').innerHTML;
                    console.log(text);
                });
            }
        }
    });

手动挂载实例 ：

可以使用Vue.extend和 $mount两个方法来手动挂载一个实例。

<div id="mount-div">

</div>

  // Vue.expand是基础的Vue构造器，创建一个子类，参数包含一个组件选项的对象
    var MyComponent = Vue.extend({
        template: '<div>Hello : {{name}}</div>',
        data: function () {
            return {
                name: 'song'
            }
        }
    });

    // 挂载实例的两种写法
    // new MyComponent().$mount('#mount-div');
    new MyComponent({
        el: '#mount-div'
    });