作用

可以在一个组件上进行多样化渲染。例如：选项卡

is属性

    <div id="father">
        <component is="one"></component>
        <component is="two"></component>
    </div>

    <script>
        Vue.component('one', {
            template: `
            <div>我是第一个组件</div>
            `
        })

        Vue.component('two', {
            template: `
            <div>我是第二个组件</div>
            `
        })
        let vm = new Vue({
            el: "#father"
        })
    </script>

可以看到通过coponent的is属性可以绑定不同的组件，渲染不同的模板。
那么我们是不是可以通过这个属性来完成一个属性多种模板的效果呢

   <div id="app">
             <button @click="onclick('hc-c')">显示第一个</button>
             <button @click="onclick('hc-b')">显示第二个</button>
             
            <component :is="name"></component>    
    </div>
    <script>
        Vue.component('hc-c', {
            template: `
                <div>我是第一个</div>
            `
        })
        Vue.component('hc-b', {
            template: `
                <div>我是第二个</div>
            `
        })

        let vm = new Vue({
            el: "#app",
            data:{
                name:''
            },
            methods:{
                onclick(item){
                    this.name = item;
                }
            }
        })
    </script>

可以看到，通过这个is属性，我们可以达到选项卡的效果