Vue.js中如何使用動態組件

這篇文章主要介紹Vue.js中如何使用動態組件，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！

本文介紹了如何在Vue.js中引用組件中的HTML元素。您可以通過使用Vue路由器或創建動態組件來切換視圖或組件模板。

Vue路由器用于在DOM中的視圖或組件模板之間導航。要使用Vue路由器，請在route組件中定義路由，并向Vue表明應該在事件(如單擊)上掛載新組件。

這是處理用戶界面內的邊欄和菜單組件中的導航的正確方法。

如果您希望在DOM中掛載的兩個任意組件之間進行切換而不需要創建路由，那么您可能需要使用動態組件。

動態組件

Vue動態組件允許用戶在兩個或多個組件之間進行切換而無需路由，甚至在切換回初始組件時保留數據狀態。

其核心思想是讓用戶在不使用路由器的情況下動態地掛載和卸載用戶界面中的組件。

為什么動態組件很重要?

在設計用戶界面時，您需要某種形式的靈活性來顯示或隱藏基于應用程序狀態的嵌套組件。動態組件以高效、簡單的方式提供了這個平臺。

該特性為您節省了大量代碼，因為您可以使用v-if和v-else等Vue條件結構輕松實現動態組件。您可以使用條件結構來實現動態組件，方法是使用占位符來輕松地將邏輯綁定到組件。

這種方法可以確保您的演示始終是干凈和明確的。

才能在Vue中創建動態組件。在你的電腦中，你將需要以下資料:

已安裝Node.js版本10.x及更高版本。 您可以通過在終端/命令提示符下運行以下命令來驗證您是否擁有Node.js 10.x版：

node -v

一個代碼編輯器(推薦使用Visual Studio)。

Vue的最新版本，已全局安裝在您的計算機上。

您的計算機上已安裝Vue CLI 3.0。 為此，請先卸載舊的CLI版本：

npm uninstall -g vue-cli

然后，安裝一個新的:

npm install -g @vue/cli

動態組件的語法

Vue為動態組件提供了一個特殊的模板元素，簡稱為component。語法是這樣的:

<component v-bind:is=”currentComponent”></component>

組件元素也可以是一個自關閉標簽:

<component v-bind:is=”currentComponent”/>

第一個選項最適合瀏覽兼容性。

演示

下載starter項目并在VS代碼中打開它，以獲得一些動態組件的示例。starter項目允許您訪問一個現有的測試組件，創建第二個測試組件，并在兩者之間進行切換。

導航到components文件夾并創建一個新文件。 將文件命名為Test2.vue并將以下代碼塊復制到文件中：

<template>
  <div><h2>I am Test 2</h2>
  </div>
</template>
<script>
export default {
  name: 'Test2',
  props: {
    msg: String
  }
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h4 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

現在您有了第二個組件，轉到App.vue文件并注冊該組件:

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <Test />
    <Test2 />
  </div>
</template>
<script>
import Test from './components/Test.vue'
import Test2 from './components/Test2.vue'
export default {
  name: 'app',
  components: {
    Test, Test2
  }
}
</script>

兩個測試組件現在嵌套在根應用程序組件中。如果只想掛載一個組件，然后動態切換到另一個組件，則必須創建一個動態組件。

將下面的代碼塊復制到app.vue文件的模板部分:

<template>
   <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <component is="Test" />
   </div>
</template>

接下來，使用以下serve命令運行應用程序:

npm run serve

您將看到只顯示Test 1組件。

如果僅在模板中指定了Test 1元素，這正是您將獲得的響應。 為了使組件具有動態性，我們可以使用v-bind指令將其綁定到set屬性。

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <component v-bind:is="component" />
  </div>
</template>
<script>
import Test from './components/Test.vue'
import Test2 from './components/Test2.vue'
export default {
  name: 'app',
  components: {
    Test, Test2
  },
  data (){
    return {
      component:"Test"
    }
  }
}
</script>

您的組件現在與數據中的組件屬性綁定。如果您將組件切換到Test2，它將自動掛載Test2組件。

在瀏覽器上測試一下。

添加方法調用

您可以添加方法調用來控制組件動態顯示的邏輯。組件元素允許您訪問Vue實例中的每個構造。

下面是一個切換這兩個組件的小方法的例子:

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <component v-bind:is="component" />
    <button v-on:click="toggle">Toggle</button>
  </div>
</template>
<script>
import Test from './components/Test.vue'
import Test2 from './components/Test2.vue'
export default {
  name: 'app',
  components: {
    Test,
     Test2
  },
  data (){
    return {
      component:"Test2"
    }
  },
  methods: {
    toggle(){
      if (this.component === Test) {
        this.component = Test2;
      } else {
        this.component = Test;
      }
    }
  }
}
</script>

切換時保持數據值有效

在Vue團隊構建這個特性時，他們選擇擴展它的功能，包括存儲每個狀態的數據值。

為了存儲這些數據，Vue提供了一個名為keep-alive的模板元素。使用keep-alive，您可以確保在從一個組件切換回另一個組件后，您的組件狀態保持原樣。

例如，如果您單擊某個鏈接或在文本框中輸入一個值，然后切換組件，那么keep-alive會將您帶回到切換回來時使用的相同鏈接或文本框。

要啟用keep-alive，請轉到app.vue文件的模板部分，并使用keep-alive元素包裝組件元素:

<keep-alive>
  <component v-bind:is="component" />
</keep-alive>

要查看它是否工作，請將表單元素添加到測試中。vue文件，在模板部分添加如下代碼塊:

<template>
  <div><h2>I am Test 1</h2>
       <form>
         First name:<br>
         <input type="text" name="firstname"><br>
         Last name:<br>
         <input type="text" name="lastname">
       </form>
  </div>
</template>

保存所有項目文件后，再次運行應用程序。在輸入框中鍵入，切換組件，并切換回原始組件。您將注意到在切換組件之前輸入的值與之前輸入的值完全相同。

以上是“Vue.js中如何使用動態組件”這篇文章的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注億速云行業資訊頻道！