vue内置动态组件component使用示例小结

更新时间：2024年03月18日 10:19:49 作者：Saga Two

component是vue内置组件,主要作用为动态渲染组件,这篇文章主要介绍了vue内置动态组件component使用示例小结,需要的朋友可以参考下

动态组件的概念

多个组件通过component标签挂载在同一个组件中，通过触发动作进行动态切换。常搭配<keep-alive></keep-alive>使用，多用于tab栏的切换等场景

1 动态组件介绍

component是vue内置组件，主要作用为动态渲染组件，基本用法如下：

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

其中，根据绑定的is的值决定拿个组件被渲染。

2 使用

2.1 动态组件切换

通过动态组件的属性，除了基本的组件动态渲染以外，我们常将其用作与动态组件的切换，示例如下：

代码如下：
主页面index.vue:

<template>
  <div>
    <title-bar :title="title" @goBack="goback"></title-bar>
    <div id="dynamic-component-demo" class="demo">
      <button
        v-for="tab in tabs"
        :key="tab"
        :class="['tab-button', { active: currentTab === tab }]"
        @click="currentTab = tab"
      >
        {{ tab }}
      </button>
      <component
        :is="currentTabComponent"
        class="tab"
        :data="propsData"
        :dataA="propsDataA"
        :dataB="propsDataB"
      ></component>
    </div>
  </div>
</template>
<script>
import TitleBar from "@/components/TitleBar";
import comA from "./components/comA";
import comB from "./components/comB";
export default {
  name: "",
  components: {
    TitleBar,
    comA,
    comB
  },
  data() {
    return {
      title: "动态组件",
      currentTab: "comA",
      tabs: ["comA", "comB"],
      propsData: "send data",
      propsDataA: "comA send data",
      propsDataB: "comB send data"
    };
  },
  created() {
    setTimeout(() => {
      this.showComponent = "comA";
      this.changeCom();
    }, 1000);
  },
  computed: {
    currentTabComponent() {
      return this.currentTab;
    }
  },
  methods: {
    // 返回方法
    goback() {
      // this.$emit("GoBack");
    }
  }
};
</script>
<style scoped>
.demo {
  font-family: sans-serif;
  border: 1px solid #eee;
  border-radius: 2px;
  padding: 20px 30px;
  margin-top: 1em;
  margin-bottom: 40px;
  user-select: none;
  overflow-x: auto;
}
.tab-button {
  padding: 6px 10px;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
  border: 1px solid #ccc;
  cursor: pointer;
  background: #f0f0f0;
  margin-bottom: -1px;
  margin-right: -1px;
}
.tab-button:hover {
  background: #e0e0e0;
}
.tab-button.active {
  background: #e0e0e0;
}
.demo-tab {
  border: 1px solid #ccc;
  padding: 10px;
}
.tab {
  margin: 20px auto;
}
</style>

组件A：

<template>
  <div class="box">BOX A</div>
</template>
<style scoped>
.box {
  height: 100px;
  width: 100px;
  background: #2a5caa;
  color: #fff;
}
</style>

组件B：

<template>
  <div class="box">BOX B {{ data }} : {{ dataB }}</div>
</template>
<script>
export default {
  props: {
    data: {
      type: String
    },
    dataB: {
      type: String
    }
  }
};
</script>
<style scoped>
.box {
  height: 100px;
  width: 100px;
  background: #4d4f36;
  color: #fff;
}
</style>

2.2 动态组件传值

动态组件的传值遵循基本组件传值规则，除了支持v-bind传值以外，还支持ref引用传值；使用引用传值需要注意的是，需要确定组件之后，再使用ref属性进行传值，否则将会无法获取应用组件的属性。使用v-bind传值代码如上所示：

<component
    :is="currentTabComponent"
    class="tab"
    :data="propsData"
    :dataA="propsDataA"
    :dataB="propsDataB"
 ></component>

2.3 动态组件数据缓存

在2.1中，若是数据需要动态渲染，组件切换之后会导致之前获得的数据丢失，这个时候，若我们想要在组件切换过程中保持这些组件的状态，以避免重复渲染导致性能问题，则可以在动态组件上使用keep-alive来缓存组件中的数据，代码如下所示：

<template>
  <div>
    <title-bar :title="title" @goBack="goback"></title-bar>
    <component :is="showComponent"></component>
    <div id="dynamic-component-demo" class="demo">
      <button
        v-for="tab in tabs"
        :key="tab"
        :class="['tab-button', { active: currentTab === tab }]"
        @click="currentTab = tab"
      >
        {{ tab }}
      </button>
      <keep-alive>
        <component
          :is="currentTabComponent"
          class="tab"
        ></component>
      </keep-alive>
    </div>
  </div>
</template>

这样一来，我们就可以实现多个组件切换时缓存组件数据的效果了；更多关于keep-alive的使用方法详见：vue3项目keepAlive使用方法详解

到此这篇关于vue内置动态组件component使用示例小结的文章就介绍到这了,更多相关vue动态组件component内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

vue分页器组件编写方法详解
这篇文章主要为大家详细介绍了vue分页器组件编写方法，可设置初始当前页，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2019-06-06
Vue中插槽slot的使用方法
插槽就是子组件中的提供给父组件使用的一个占位符，用<slot></slot> 表示，父组件可以在这个占位符中填充任何模板代码，如 HTML、组件等，填充的内容会替换子组件的<slot></slot>标签，这篇文章主要介绍了Vue插槽的理解和使用,需要的朋友可以参考下
2023-03-03
vue中如何配置proxy代理
这篇文章主要介绍了vue中如何配置proxy代理问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-01-01
vue+flv.js+SpringBoot+websocket实现视频监控与回放功能
vue+springboot的项目,需要在页面展示出海康的硬盘录像机连接的摄像头的实时监控画面以及回放功能，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友参考下吧
2022-02-02
vue中用 async/await 来处理异步操作
这篇文章主要介绍了vue中用 async/await 来处理异步操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-07-07
element-plus+Vue3实现表格数据动态渲染
在Vue中,el-table是element-ui提供的强大表格组件,可以用于展示静态和动态表格数据,本文主要介绍了element-plus+Vue3实现表格数据动态渲染,感兴趣的可以了解一下
2024-03-03
解决vue项目跳转同样的页面不刷新的问题思路详解
做公司官网项目的时候遇到的场景,顶部导航栏分类商品跳转到分类详情,然后在分类详情再次点击顶部导航栏里另外的分类商品,跳到同样的页面数据不刷新,下面小编给大家分享解决方式,关于vue跳转不刷新问题感兴趣的朋友一起看看吧
2023-09-09
使用Vue CLI配置代码压缩、加密和混淆功能示例代码
这篇文章主要介绍了使用Vue CLI配置代码压缩、加密和混淆功能,通过配置 vue.config.js 文件，我们可以使用 Vue CLI 轻松实现对 Vue 应用程序代码的压缩、加密和混淆，需要的朋友可以参考下
2023-06-06
vue的webcamjs集成方式
这篇文章主要介绍了vue的webcamjs集成方式，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-11-11
vue3+ts+echarts实现按需引入和类型界定方式
这篇文章主要介绍了vue3+ts+echarts实现按需引入和类型界定方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-10-10