vue的动态组件 keep-alive

2022-04-09 本文已影响0人咸鱼不咸_123

1. 什么是动态组件

动态组件指的是 动态切换组件的显示与隐藏

2. 如何实现动态组件渲染

vue提供了一个内置的<component>组件，专门用来实现动态组件的渲染。

作用：组件的占位符
is的值表示要渲染的组件

示例代码如下：

Left.vue的代码

<template>
  <div class="box">这是左边的组件</div>
</template>

<script>
export default {
  name: "Left",
};
</script>

<style lang="less" scoped>
.box {
  background-color: pink;
  border: 1px solid;
  height: 400px;
  width: 400px;
  color: white;
}
</style>

Right.vue的代码

<template>
  <div class="box">这是右边的组件</div>
</template>

<script>
export default {
  name: "Right",
};
</script>

<style lang="less" scoped>
.box {
  background-color: blue;
  border: 1px solid;
  height: 400px;
  width: 400px;
  color: white;
}
</style>

App.vue的代码

<template>
  <div id="app">
    <div class="content">
      <component :is="name"></component>
    </div>
    <h1>这是一个App组件</h1>
    <button @click="name = 'Left'">显示Left</button>
    <button @click="name = 'Right'">显示Right</button>
  </div>
</template>

<script>
import Left from "@/components/Left";
import Right from "@/components/Right";
export default {
  name: "App",
  components: {
    Left,
    Right,
  },
  data() {
    return {
      name: "Left",
    };
  },
};
</script>
<style lang="less">
.content {
  display: flex;
}
</style>

69.png

3.keep-alive的使用

使用keep-alive可以保持状态，组件创建后不会被销毁，

那怕被隐藏了也不会被销毁。

使用keep-alive来保持状态

语法

<keep-alive>
    <组件名></组件名>
</keep-alvie>

Left.vue的代码

<template>
  <div class="box">
    <h3>这是左边的组件{{ count }}</h3>
    <button @click="count++">+1</button>
  </div>
</template>

<script>
export default {
  name: "Left",
  data() {
    return {
      count: 0,
    };
  },
  created() {
    console.log("Left组件被创建了");
  },
  destroyed() {
    console.log("Left组件被销毁了");
  },
};
</script>

<style lang="less" scoped>
.box {
  background-color: pink;
  border: 1px solid;
  height: 400px;
  width: 400px;
  color: white;
}
</style>

Right.vue的代码

<template>
  <div class="box">这是右边的组件</div>
</template>

<script>
export default {
  name: "Right",
};
</script>

<style lang="less" scoped>
.box {
  background-color: blue;
  border: 1px solid;
  height: 400px;
  width: 400px;
  color: white;
}
</style>

App.vue的代码

<template>
  <div id="app">
    <div class="content">
      <keep-alive>
        <component :is="name"></component>
      </keep-alive>
    </div>
    <h1>这是一个App组件</h1>
    <button @click="name = 'Left'">显示Left</button>
    <button @click="name = 'Right'">显示Right</button>
  </div>
</template>

<script>
import Left from "@/components/Left";
import Right from "@/components/Right";
export default {
  name: "App",
  components: {
    Left,
    Right,
  },
  data() {
    return {
      name: "Left",
    };
  },
};
</script>
<style lang="less">
.content {
  display: flex;
}
</style>

实现效果：