vue组件详解（五）——组件高级用法

        <div id="app19">
            <my-component19 :count="1"></my-component19>
        </div>

Vue.component('my-component19',{
    name: 'my-component19',  //其实当你利用 Vue.component 全局注册了一个组件，全局的ID会被自动设置为组件的name。
    props: {
      count: {
          type: Number,
          default: 1
      }
    },
    template: '<div><my-component19 :count="count+1" v-if="count<3"></my-component19></div>'
});

var app19 =  new Vue({
    el: '#app19'
});

    <div id="app19">
        <div>
            <div>
                <div><!----></div>
            </div>
        </div>
    </div>

        <div id="app20">
            <my-component20 inline-template>
                <div>
                    <h3>在父组件中定义子组件的模板</h3>
                    <p>{{msg}}</p>
                </div>
            </my-component20>
        </div>

Vue.component('my-component20',{
    data: function(){
        return {
            msg: '在子组件声明的数据'
        }
    }
});

var app20 =  new Vue({
    el: '#app20'
});

        <div id="app21">
            <component :is="currentView"></component>
            <button @click="changeView('A')">切换到A</button>
            <button @click="changeView('B')">切换到B</button>
            <button @click="changeView('C')">切换到C</button>
        </div>

var app21 =  new Vue({
    el: '#app21',
    data: {
      currentView: 'comA'
    },
    methods: {
        changeView: function(data){
            this.currentView = 'com'+ data　　//动态地改变currentView的值就可以动态挂载组件了。
        }
    },
    components: {
        comA: {
            template: '<div>组件A</div>'
        },
        comB: {
            template: '<div>组件B</div>'
        },
        comC: {
            template: '<div>组件C</div>'
        }
    }
});

        <div id="app22">
            <my-component22></my-component22>
        </div>

Vue.component('my-component22',function(resolve, reject){
    window.setTimeout(function(){
        resolve({
            template: '<div>我是异步渲染的</div>'
        })
    },2000)
});

var app22 =  new Vue({
    el: '#app22'
});