Vue動態組件和keep-alive組件實例詳解

Posted on by

動態組件

多個組件使用同一個掛載點，並可以動態切換，這就是動態組件。

格式

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

註意點

  • is隻能是動態屬性，:is="組件註冊後的標簽名字符串或data變量"
  • 不能直接拿註冊標簽名賦值使用

使用效果

需求: 完成一個註冊功能頁面, 2個按鈕切換, 額外封裝兩個組件：一個填寫註冊信息, 一個填寫用戶簡介信息。

目錄結構

根組件
├── 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'">賬號密碼填寫</button>
    <button @click="comName = 'UserInfo'">個人信息填寫</button>

    <p>下面顯示註冊組件:</p>
    <div style="border: 1px solid red">
      <!-- vue內置的組件component, 可以動態顯示組件 -->
      <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>

效果

小結

vue內置component組件, 配合is屬性, 設置要顯示的組件標簽名字。

keep-alive組件

使用背景

組件切換會導致組件被頻繁銷毀和重新創建, 大多數情況下是有自己的意義的，但也可能會導致不必要的性能損耗。

解決方法

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

使用keep-alive組件

<keep-alive>
    <!-- vue內置的組件component, 可以動態顯示組件 -->
    <component :is="comName"></component>
</keep-alive>

使用keep-alive組件會補充兩個生命周期：

  • activated -激活
  • deactivated -失去激活狀態

小結

keep-alive可以提高組件的性能, 內部包裹的標簽不會被銷毀和重新創建, 觸發激活和非激活的生命周期方法。

keep-alive組件-指定緩存

keep-alive默認會將所有包裹的組件進行緩存，使用include屬性可以指定緩存組件。

語法

  • 寫法1： include="組件名1,組件名2…"
  • 寫法2： :include="['組件名1'， '組件名2']"
<keep-alive include="name1,name2">
    <!-- vue內置的組件component, 可以動態顯示組件 -->
    <component :is="comName"></component>
</keep-alive>

註意：

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

總結

到此這篇關於Vue動態組件和keep-alive組件的文章就介紹到這瞭,更多相關Vue動態組件 keep-alive組件內容請搜索LevelAH以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持LevelAH！

推薦閱讀：