动态组件实现tab栏切换

动态组件:在同一个挂载点,可以切换使用不同的插件

实现动态组件的步骤:

1.准备两个被切换的组件:username.vue和userinfo.vue

// username.vue
<template>
  <div>
    用户名:<input type="text" /> <br />
    密&emsp;码:<input type="password" />
  </div>
</template>

<script>
export default {};
</script>

<style>
</style>

// userinfo.vue
<template>
  <div>
    个人介绍:
    <textarea></textarea>
  </div>
</template>

<script>
export default {};
</script>

<style>
</style>

2.再准备一个user.vue文件,在此文件中写入两个切换按钮,并将两个被切换的组件引入注册使用

<template>
  <div>
    <button>个人信息</button>&ensp;
    <button>个人简介</button>
    <p>下面显示组件:</p>
    <hr />
    <div class="main">
     
    </div>
  </div>
</template>

<script>
import username from "../components/username.vue";
import userinfo from "../components/userinfo.vue";

export default {
  components: {
    username,
    userinfo,
  },
};
</script>

<style>
.main {
  border: 1px solid pink;
  width: 300px;
  height: 200px;
}
</style>

3.在user.vue中准备好变量show来承载要显示的组件名

data() {
    return {
      show: "username",
    };
  },

4.在user.vue中设置挂载点<component>,使用:is属性来设置要现实的组件

<div class="main">
    <component :is="show"></component>
</div>

5.在两个按钮上分别注册点击事件,来修改show的组件吗

<button @click="show = 'username'">个人信息</button>&ensp;
<button @click="show = 'userinfo'">个人简介</button>

组件缓存:keep-alive

<div class="main">
      <keep-alive>
        <component :is="show"></component>
      </keep-alive>
</div>

在vue内置组件,包起要频繁切换的组件

好处:不会频繁的创建和销毁组件,使页面更快地呈现

扩展: