vue动态组件切换（选项卡）

vue的动态组件 <template :is='变量'></template>

可以通过改变变量，来改变template的替换内容。达到选项卡的功能

如果想要切换保持不重新创建，用<keep-alive>标签。

但是请注意：那个滚动条的滚动位置记录不下来。input里的内容可以。

    <div id="app">
            <button @click='change1'>passage1</button><button @click='change2'>passage2</button>
        <keep-alive>
           <component :is='myComponent'></component>
          
        </keep-alive>
    </div>
    <!-- <script src="../vue.js"></script> -->
    <script src="https://cdn.bootcss.com/vue/2.5.21/vue.common.dev.js"></script>
    <script>
        var  myComponent1 = {
                    template:`
                    <div>
                     <div class="content">11111111111111111111111111111111111111111111111111111111111111111111</div>
                     <input type="text">
                    </div>
                    `
               }
               var  myComponent2 = {
                    template:`
                     <div class="content">222222222222222222222222222222222222222222222222222222222222122222222222221</div>
                    `
               }
        var vm = new Vue({
            el: "#app",
            data:{
                myComponent: myComponent1
            },
            methods:{
                change1(){
                    this.myComponent = myComponent1 
                },
                change2(){
                    this.myComponent = myComponent2
                }
            }
          
        })