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 } } })
转载于:https://www.cnblogs.com/dangdanghepingping/p/10254321.html