快捷導(dǎo)航

Vue動(dòng)態(tài)組件和keep-alive組件實(shí)例詳解

更新時(shí)間：2022年05月12日 10:00:55 作者：劉溜溜

動(dòng)態(tài)組件指的是動(dòng)態(tài)切換組件的顯示與隱藏,下面這篇文章主要給大家介紹了關(guān)于Vue動(dòng)態(tài)組件和keep-alive組件的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下

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

多個(gè)組件使用同一個(gè)掛載點(diǎn)，并可以動(dòng)態(tài)切換，這就是動(dòng)態(tài)組件。

格式

    <component :is="comName"></component>

注意點(diǎn)

is只能是動(dòng)態(tài)屬性，:is="組件注冊(cè)后的標(biāo)簽名字符串或data變量"
不能直接拿注冊(cè)標(biāo)簽名賦值使用

使用效果

需求: 完成一個(gè)注冊(cè)功能頁(yè)面, 2個(gè)按鈕切換, 額外封裝兩個(gè)組件：一個(gè)填寫注冊(cè)信息, 一個(gè)填寫用戶簡(jiǎn)介信息。

目錄結(jié)構(gòu)

根組件
├── App.vue
└── components
    ├── UserName.vue # 用戶名和密碼輸入框
    └── UserInfo.vue # 人生格言和自我介紹框

操作

UserName.vue

<template>
  <div>
    <h2>UserName</h2>
    <p>用戶名:<input /> </p>
    <p>密碼:<input /> </p>
  </div>
</template>

<script>
export default {

}
</script>

UserInfo.vue

<template>
  <div>
    <h2>UserInfo.vue</h2>
    <p>人生格言:<input /> </p>
    <p>自我介紹:<textarea /> </p>
  </div>
</template>

<script>
export default {

}
</script>

父組件APP.vue

<template>
  <div>
    <button @click="comName = 'UserName'">賬號(hào)密碼填寫</button>
    <button @click="comName = 'UserInfo'">個(gè)人信息填寫</button>

    <p>下面顯示注冊(cè)組件:</p>
    <div style="border: 1px solid red">
      <!-- vue內(nèi)置的組件component, 可以動(dòng)態(tài)顯示組件 -->
      <component :is="comName"></component>
    </div>
  </div>
</template>

<script>
import UserName from "./UserName";
import UserInfo from "./UserInfo";
export default {
  data() {
    return {
      comName: "UserName",
    };
  },
  components: {
    UserName,
    UserInfo,
  },
};
</script>

效果

小結(jié)

vue內(nèi)置component組件, 配合is屬性, 設(shè)置要顯示的組件標(biāo)簽名字。

keep-alive組件

使用背景

組件切換會(huì)導(dǎo)致組件被頻繁銷毀和重新創(chuàng)建, 大多數(shù)情況下是有自己的意義的，但也可能會(huì)導(dǎo)致不必要的性能損耗。

解決方法

使用Vue內(nèi)置的keep-alive組件, 可以讓包裹的組件保存在內(nèi)存中不被銷毀。

使用keep-alive組件

<keep-alive>
    <!-- vue內(nèi)置的組件component, 可以動(dòng)態(tài)顯示組件 -->
    <component :is="comName"></component>
</keep-alive>

使用keep-alive組件會(huì)補(bǔ)充兩個(gè)生命周期：

activated -激活
deactivated -失去激活狀態(tài)

小結(jié)

keep-alive可以提高組件的性能, 內(nèi)部包裹的標(biāo)簽不會(huì)被銷毀和重新創(chuàng)建, 觸發(fā)激活和非激活的生命周期方法。

keep-alive組件-指定緩存

keep-alive默認(rèn)會(huì)將所有包裹的組件進(jìn)行緩存，使用include屬性可以指定緩存組件。

語(yǔ)法

寫法1： include="組件名1,組件名2..."
寫法2： :include="['組件名1'， '組件名2']"

<keep-alive include="name1,name2">
    <!-- vue內(nèi)置的組件component, 可以動(dòng)態(tài)顯示組件 -->
    <component :is="comName"></component>
</keep-alive>

注意：

匹配首先檢查組件自身的 name 選項(xiàng)，如果 name 選項(xiàng)不可用，則匹配它的局部注冊(cè)名稱 (父組件 components 選項(xiàng)的鍵值)。

總結(jié)

到此這篇關(guān)于Vue動(dòng)態(tài)組件和keep-alive組件的文章就介紹到這了,更多相關(guān)Vue動(dòng)態(tài)組件 keep-alive組件內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: