基本原理是vue的动态组件，参考地址：https://cn.vuejs.org/v2/guide/components-dynamic-async.html
三个文件，分开写是为了更直观自由。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 |
<template> <div> <ul> <li v-for="(tab, index) in tabs" :key="index" @click="changeContent(tab.content)"> {{tab.name}} </li> </ul> <keep-alive> <component :is="currentTab"></component> </keep-alive> </div> </template> <script> import stepOne from '@/views/step/stepOne' import stepSecond from '@/views/step/stepSecond' export default { name: 'index', data () { return { tabs: [ { name: '标签1', content: stepOne }, { name: '标签2', content: stepSecond } ], currentTab: stepOne } }, components: { stepOne, stepSecond }, methods: { changeContent (val) { // console.log(this.currentTab.name, typeof this.currentTab) // console.log(val.name, typeof val) if (this.currentTab !== val) { this.currentTab = val } else { alert('现在就是你要的这个') } } } } </script> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<template> <div> <div @click="more()" v-html="val"></div> </div> </template> <script> export default { name: 'stepOne', data () { return { val: '这是第一个tab' } }, methods: { more () { this.val = this.val + 'more ' } } } </script> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<template> <div> {{val}} </div> </template> <script> export default { name: 'stepSecond', data () { return { val: '这是第二个tab' } } } </script> |