vue动态组件 component

星星散落人间

已于 2023-02-14 09:46:55 修改

阅读量456

点赞数

CC 4.0 BY-SA版权

分类专栏： vue vue2 文章标签： vue.js 前端 javascript

于 2023-02-14 09:44:36 首次发布

本文链接：https://blog.youkuaiyun.com/future_1_/article/details/129013226

vue 同时被 2 个专栏收录

20 篇文章

订阅专栏

13 篇文章

订阅专栏

该文章演示了在Vue.js中如何利用<component>元素的is属性动态切换多个组件，并结合keep-alive实现组件缓存。当用户点击<ul>中的列表项时，index会改变，从而切换渲染不同的组件（如时间选择器、下拉框、姓名输入框）。同时，文章提到了keep-alive的activated和deactivated生命周期钩子，分别在组件激活和被替换时触发，用于管理组件的状态。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在一个挂载点使用多个组件，并进行动态切换,使用<`component>`元素的 is 的特性

<!-- 动态组件由 vm 实例的 componentName 控制 -->
<component :is="componentName"></component>

根据绑定的`is`的值决定哪个组件被渲染

<template>
  <div class="hello"> 
    <ul>
      <li 
      v-for="(item,index) in tab" 
      :key="index" 
      style="cursor:pointer" 
      @click="changeView(index)">
      {{item}}
      </li>
      <keep-alive>
		<component :is="currentView"></component>
	  </keep-alive>
    </ul>
  </div>
</template>

<script> 
export default {  
  data() {
    return {
      index: 0,
      arr: ["inputDatePicker", "inputSelect", "inputName"], // 组件已在main.js全局引入
      tab: ["时间选择器组件", "下拉框组件", "顾客姓名输入框组件"],
    };
  },
  computed: {
    currentView() {
      return this.arr[this.index];
    }
  },
  methods: {
    changeView(index) {
      this.index = index;
    }
  },

  // keep-alive 两个生命周期
  activated() {
     console.log("inputDatePicker 时间选择器组件被添加");// 被缓存的组件激活时触发
   },
   deactivated() {
     console.log("inputDatePicker 时间选择器组件被移除"); // 被切换到其他组件时触发
   }

};
</script>