Vue动态渲染组件

动态组件，通过 is 去动态渲染组件

<component :is="type"></component>

比如下面这个例子

<!--父组件-->
<div id="app">
    <component :is="type"></component>

    <button @click="handleClick">click me</button>
</div>

Vue.component("child-one", {
    template: `<div v-once>one,one</div>`
});

Vue.component("child-two", {
    template: `<div v-once>two-two</div>`
});

var vm = new Vue({
    el: "#app",
    data: {
      type: 'child-one'
    },
    methods:{
      handleClick (){
        this.type = (this.type === 'child-one'? 'child-two': 'child-one');
      }
    }
});

在子组件中添加 v-once 有助于提高静态页面的渲染速度。