9. is 的用法

为什么用 is：

　　有时候，组件本身和使用组件的地方有冲突。

　　比如：

　　　　在table中使用div组件，这个时候组件会用到table的外面去，这个时候，可以通过is的方式，把组件嵌套到table当中。

　　此时解决的办法有：

　　　　一：用标签包着子组件：<tr><ppa></ppa></tr>

　　　　二：用 is 的方式：<tr is='ppa'></tr>

　　这两种方法出来的效果是一样的。（实测，ul>li 里面不能用）

:is 动态切换组件：

直接上个选项卡的练习：

//DOM部份
<div id='app'>
<button v-for='i in 3' @click='click(i)'>按钮{{i}}</button>  //v-for 的不同用法
<div :is='h'></div>

//script 部份
Vue.component('ppa',{
            template:`<div>111</div>`
        })    
        let ppx = {
            template: `<div>11111</div>`
        }
        let ppx2 = {
            template: `<div>22222</div>`
        }
        let ppx3 = {
            template: `<div>33333</div>`
        }

        new Vue({
            el: '#app',
            data: {
                h: 'ppx'
            },
            methods: {
                click(i) {
                    switch (i) {
                        case 1:
                            this.h = 'ppx';
                            break;
                        case 2:
                            this.h = 'ppx2';
                            break;
                        case 3:
                            this.h = 'ppx3';
                            break;
                        default:
                            this.h = 'ppx';
                            break;
                    }
                }
            },
            components: {//组件
                ppx,
                ppx2,
                ppx3
            }
        })