快捷導(dǎo)航

vue內(nèi)置動(dòng)態(tài)組件component使用示例小結(jié)

更新時(shí)間：2024年03月18日 10:19:49 作者：Saga?Two

component是vue內(nèi)置組件,主要作用為動(dòng)態(tài)渲染組件,這篇文章主要介紹了vue內(nèi)置動(dòng)態(tài)組件component使用示例小結(jié),需要的朋友可以參考下

動(dòng)態(tài)組件的概念

多個(gè)組件通過component標(biāo)簽掛載在同一個(gè)組件中，通過觸發(fā)動(dòng)作進(jìn)行動(dòng)態(tài)切換。常搭配<keep-alive></keep-alive>使用，多用于tab欄的切換等場景

1 動(dòng)態(tài)組件介紹

component是vue內(nèi)置組件，主要作用為動(dòng)態(tài)渲染組件，基本用法如下：

<!-- 動(dòng)態(tài)組件由 vm 實(shí)例的 `componentName` property 控制 -->
<component :is="componentName"></component>

其中，根據(jù)綁定的is的值決定拿個(gè)組件被渲染。

2 使用

2.1 動(dòng)態(tài)組件切換

通過動(dòng)態(tài)組件的屬性，除了基本的組件動(dòng)態(tài)渲染以外，我們常將其用作與動(dòng)態(tài)組件的切換，示例如下：

代碼如下：
主頁面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: "動(dòng)態(tài)組件",
      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 動(dòng)態(tài)組件傳值

動(dòng)態(tài)組件的傳值遵循基本組件傳值規(guī)則，除了支持v-bind傳值以外，還支持ref引用傳值；使用引用傳值需要注意的是，需要確定組件之后，再使用ref屬性進(jìn)行傳值，否則將會(huì)無法獲取應(yīng)用組件的屬性。使用v-bind傳值代碼如上所示：

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

2.3 動(dòng)態(tài)組件數(shù)據(jù)緩存

在2.1中，若是數(shù)據(jù)需要?jiǎng)討B(tài)渲染，組件切換之后會(huì)導(dǎo)致之前獲得的數(shù)據(jù)丟失，這個(gè)時(shí)候，若我們想要在組件切換過程中保持這些組件的狀態(tài)，以避免重復(fù)渲染導(dǎo)致性能問題，則可以在動(dòng)態(tài)組件上使用keep-alive來緩存組件中的數(shù)據(jù)，代碼如下所示：

<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>

這樣一來，我們就可以實(shí)現(xiàn)多個(gè)組件切換時(shí)緩存組件數(shù)據(jù)的效果了；更多關(guān)于keep-alive的使用方法詳見：vue3項(xiàng)目keepAlive使用方法詳解

到此這篇關(guān)于vue內(nèi)置動(dòng)態(tài)組件component使用示例小結(jié)的文章就介紹到這了,更多相關(guān)vue動(dòng)態(tài)組件component內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: