vue动态组件详解

1、 什么是动态组件

动态组件是指:在一个挂载点使用多个组件,并进行动态切换。可能对于新手来说,这句话有些难理解,什么是挂载点?可以简单的理解为页面的一个位置。
最常见的就是:tab的切换功能。

在vue要实现这个功能通常用两种方式。一是使用<component>元素的 is 的特性,二是使用 v-if

方式一:

<template>
  <div class="hello">
    <h3>使用component 的 is特性</h3>
    <ul>
      <li 
      v-for="(item,index) in tabList" 
      :key="index" 
      style="cursor:pointer" 
      @click="changeView(index)">
      {{item}}</li>
    </ul>
    <component :is="currentView"></component>
  </div>
</template>

<script>
// 相关的组件代码在这里不展示
import shouji from "./shouji";
import pc from "./pc";
import shuma from "./shuma";
export default {
  name: "HelloWorld",
  components: {
    shouji,
    pc,
    shuma,
  },
  data() {
    return {
      index: 0,
      arr: ["shuma", "shouji", "pc"],
      tabList: ["数码", "手机", "电脑"],
    };
  },
  computed: {
    currentView() {
      return this.arr[this.index];
    }
  },
  methods: {
    changeView(index) {
      this.index = index;
    }
  },
};
</script>

方式二

<template>
  <div class="hello">
    <h3>使用v-if实现</h3>
    <ul>
      <li v-for="(item,index) in tabList" :key="index" style="cursor:pointer" @click="change(index)">{{item}}</li>
    </ul>
    <div>
        <shuma v-if="index===0"></shuma>
        <shouji v-else-if="index===1"></shouji>
        <pc v-else></pc>
    </div>
  </div>
</template>

<script>
// 相关的组件代码在这里不展示
import shouji from "./shouji";
import pc from "./pc";
import shuma from "./shuma";
export default {
  name: "HelloWorld",
  components: {
    shouji,
    pc,
    shuma,
  },
  data() {
    return {
      index: 0,
      keppIndex:0,
      arr: ["shuma", "shouji", "pc"],
      tabList: ["数码", "手机", "电脑"],
    };
  },
  computed: {
  },
  methods: {
    change(index) {
      this.index = index;
    }
  },
};
</script>

缓存

上述讲到的方法虽然能够实现了动态组件的切换,但是每次切换都会把上一个组件销毁,然后渲染下一个组件,对于多次切换而言,显然每次的销毁和重新渲染,很大消耗了我们的性能。所以我们可以通过keep-alive对组件进行缓存,对于不显示的组件不是去销毁他,而是使他处理不激活的状态,当需要显示时再去激活。

<template>
  <div class="hello">
    <h3>使用component 的 is特性 有缓存的组件</h3>
    <ul>
      <li 
      v-for="(item,index) in tabList" 
      :key="index" 
      style="cursor:pointer" 
      @click="changeView(index)">
      {{item}}</li>
      <keep-alive>
		<component :is="currentView"></component>
	  </keep-alive>
    </ul>
  </div>
</template>

<script>
// 相关的组件代码在这里不展示
import shouji from "./shouji";
import pc from "./pc";
import shuma from "./shuma";
export default {
  name: "HelloWorld",
  components: {
    shouji,
    pc,
    shuma,
  },
  data() {
    return {
      index: 0,
      arr: ["shuma", "shouji", "pc"],
      tabList: ["数码", "手机", "电脑"],
    };
  },
  computed: {
    currentView() {
      return this.arr[this.index];
    }
  },
  methods: {
    changeView(index) {
      this.index = index;
    }
  },
};
</script>

和keep-alive 相关的两个生命周期

activated() {
     console.log("shouji 手机页面被添加");// 被缓存的组件激活时触发
 },
 deactivated() {
     console.log("shouji 手机页面被移除"); // 被切换到其他组件时触发
 }

keep-alive的两个属性

include和exclude

include表示只能允许匹配到的组件生效
exclude则相反,除了匹配到的组件之外有效

使用方法:


<!-- 字符串 逗号分隔字符串, a,b 分别为组件名 -->
<keep-alive include="a,b">
  <component :is="currentView"></component>
</keep-alive>
<!-- 正则表达式 -->
<keep-alive :include="/a|b/">
  <component :is="currentView"></component>
</keep-alive>
<!-- 数组 -->
<keep-alive :include="['a', 'b']">
  <component :is="currentView"></component>
</keep-alive>
  • 30
    点赞
  • 216
    收藏
    觉得还不错? 一键收藏
  • 5
    评论
动态组件是指在 Vue 应用中,根据不同的条件渲染不同的组件。在 Vue 中,可以通过动态组件来实现组件动态切换。 Vue 提供了两种方式来实现动态组件: 1. 使用 \<component> 标签,通过绑定 is 属性来实现动态组件的切换。 ```html <template> <div> <button @click="currentComponent = 'ComponentA'">显示组件 A</button> <button @click="currentComponent = 'ComponentB'">显示组件 B</button> <component :is="currentComponent"></component> </div> </template> <script> import ComponentA from './ComponentA.vue' import ComponentB from './ComponentB.vue' export default { components: { ComponentA, ComponentB }, data() { return { currentComponent: 'ComponentA' } } } </script> ``` 上面的代码中,使用了 \<component> 标签来动态渲染组件,通过绑定 is 属性来指定要渲染的组件名称。 2. 使用动态组件的 \<keep-alive> 标签,可以缓存已经渲染的组件,避免频繁的组件销毁和创建。 ```html <template> <div> <button @click="currentComponent = 'ComponentA'">显示组件 A</button> <button @click="currentComponent = 'ComponentB'">显示组件 B</button> <keep-alive> <component :is="currentComponent"></component> </keep-alive> </div> </template> <script> import ComponentA from './ComponentA.vue' import ComponentB from './ComponentB.vue' export default { components: { ComponentA, ComponentB }, data() { return { currentComponent: 'ComponentA' } } } </script> ``` 上面的代码中,使用了 \<keep-alive> 标签来缓存已经渲染的组件,使得组件可以被复用。 总之,动态组件Vue 中非常重要的一个功能,可以通过动态组件实现组件的复用和动态切换,提高应用的性能和可维护性。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值