返回列表

Vue动态组件 <component :is="aaa"></component>

默认分类 2018/11/30 02:21

原文地址: https://www.jianshu.com/p/1dfd0efb09f6

本文写给对Vue组件了解的基础上,如果你不明白什么是Vue的组件,可以去官网看看Vue组件基础

在Vue中有一个 :is 特性, 组件可以用过 :is 来切换,我们可以写一个例子来说一说 :is

<template>
  <div>
    <!--
      按钮,用于切换组件
      注意,此时的A为字符串而非变量
    -->
    <button @click="showWhat = 'A'">showA</button>
    <button @click="showWhat = 'B'">showB</button>

    <!--
      动态切换显隐,组件
    -->
    <component :is="showWhat"></component>
  </div>
</template>

<script>
//引入组件A以及组件B
import A from "./a";
import B from "./b";

export default {
  components: {
    //声明组件A,B
    A,
    B
  },
  data() {
    return {
      //默认显示组件A,若字符串为B则显示组件B,name为component声明
      showWhat: "A"
    };
  }
};
</script>

<style>
</style>

讲解也在例子中包含了, 我们可以用 :is 来优雅的切换TAB, 这里我们来说一说为什么 不用 v-show 来切换呢, 先说说他们之间的区别吧, V-show 会第一时间加载两个组 件, 两个组件的生命周期都会触发,会造成不必要的性能浪费,而且切换的时候永远不会 再创造挂载一次 Vue(),也就是说,生命周期只会触发一次, 并不优雅, 既然说到 了v-show,那么相信大家都想到了v-if,如果是v-if的话 确实不会造成同事加载两 个组件,不过v-if切换的话 每次都会创造挂载一次,如果没有重新渲染的需要的话 , 会造成性能浪费, 那么 :is 如何缓存呢, :is 通过 keep-alive标签缓存。被该标 签包裹的组件就会被缓存下来,每次点击都会重新渲染(即创造~挂载)。相比较于 v-showv-if 来说 使用 :is 动态组件更加优雅~

a.vue 或 b.vue:

<template>
  <div>
    Hello AAA {{activeName}}
  </div>
</template>

<script>
export default {
  // props: ['name'],
  data () {
    return {}
  },
  computed: {
    activeName () {
      // console.log('AAA', this.$parent)
      return this.$route.name
    }
  }
}
</script>

<style>

</style>