动态包裹哈 <keep-alive> <component :is="comName"></component> </keep-alive>
子组件
<template> <div> <h2>我是登录组件</h2> </div> </template> <template> <div> <h2>我是注册组件</h2> </div> </template> --------------- <template> <div class="mett-page"> <h2>遇见问题</h2> <!-- 推荐这种写法--> <ul class="tab-tilte"> <li :key="index" v-for="(title,index) in tabTitle" @click="getclcik(index)" :class="{active:cur==index}" >{{title}}</li> </ul> <div class="tab-content"> <div v-for="(m,index) in tabMain" :key="index" v-show="cur==index">{{m}}</div> </div> </div> </template> <script> export default { data() { return { tabTitle: ["标题一", "标题二", "标题三", "标题四"], tabMain: ["内容一", "内容二", "内容三", "内容四"], cur: 0 //默认选中第一个tab }; }, methods: { getclcik(value) { this.cur = value; } } }; </script> <style scoped> .mett-page .tab-tilte { display: flex; list-style: none; } .mett-page .tab-tilte > li { width: 50px; height: 40px; } </style>
引入组件##
<template> <!-- is属相的使用 --> <div class="box"> <div class="link-a" @click="comName='login'">登录</div> <div class="link-a" @click="comName='resgister'">注册</div> <div class="link-a" @click="comName='mett'">遇见问题</div> <keep-alive> <component :is="comName"></component> </keep-alive> </div> </template> <script> import login from "../../components/logincom/login"; import resgister from "../../components/logincom/register"; import mett from "../../components/logincom/mett"; export default { data() { return { comName: "login" }; }, components: { resgister, login, mett } }; </script> <style scoped> .box { display: flex; } .link-a { width: 80px; height: 40px; text-align: center; line-height: 40px; background: pink; margin-left: 20px; } </style>