Vue将Tab页内每一页内容分为独立文件（引入其他文件内容）

使用这个操作的主要原因是首页和常用页面切换的时候，浏览器不用加载了。主要应用于有页面切换动画的场景，比如小程序、公众号、二维码海报、首页大屏等。

Vue可以将模板文件和内容文件分开，然后使用标签套接的方式直接引用。

注意插入点：

<tab1></tab1>

import tab1 from './tabs/tab1'

export default {
    components: {
      tab1,
    },
}

更改这三处即可插入tabs/tab.vue文件了

---

示例：
（在AntDesignVue中的tab标签中引入tabs/tab1.vue文件）
主文件代码：

<template>
		<div>
            <a-tabs default-active-key="1" @change="callback">
           		<a-tab-pane key="1" tab="测试1">
                	随便的内容
				</a-tab-pane>
                <a-tab-pane key="2" tab="测试">
                	<tab1></tab1>
				</a-tab-pane>
			</a-tabs>
		</div>
<script>
import tab1 from './tabs/tab1'

export default {
    components: {
      tab1,
    },
}

而tab1.vue则随意写即可

<template>
<div>111
</div>
</template>

<script>
    export default {
        name: "tab1"
    }
</script>

<style scoped>

</style>

实际效果

---