Vue.js中如何使用動(dòng)態(tài)組件

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

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

Vue路由器用于在DOM中的視圖或組件模板之間導(dǎo)航。要使用Vue路由器，請(qǐng)?jiān)趓oute組件中定義路由，并向Vue表明應(yīng)該在事件(如單擊)上掛載新組件。

這是處理用戶界面內(nèi)的邊欄和菜單組件中的導(dǎo)航的正確方法。

如果您希望在DOM中掛載的兩個(gè)任意組件之間進(jìn)行切換而不需要?jiǎng)?chuàng)建路由，那么您可能需要使用動(dòng)態(tài)組件。

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

Vue動(dòng)態(tài)組件允許用戶在兩個(gè)或多個(gè)組件之間進(jìn)行切換而無需路由，甚至在切換回初始組件時(shí)保留數(shù)據(jù)狀態(tài)。

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

為什么動(dòng)態(tài)組件很重要?

在設(shè)計(jì)用戶界面時(shí)，您需要某種形式的靈活性來顯示或隱藏基于應(yīng)用程序狀態(tài)的嵌套組件。動(dòng)態(tài)組件以高效、簡(jiǎn)單的方式提供了這個(gè)平臺(tái)。

該特性為您節(jié)省了大量代碼，因?yàn)槟梢允褂?code>v-if和v-else等Vue條件結(jié)構(gòu)輕松實(shí)現(xiàn)動(dòng)態(tài)組件。您可以使用條件結(jié)構(gòu)來實(shí)現(xiàn)動(dòng)態(tài)組件，方法是使用占位符來輕松地將邏輯綁定到組件。

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

才能在Vue中創(chuàng)建動(dòng)態(tài)組件。在你的電腦中，你將需要以下資料:

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

node -v

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

Vue的最新版本，已全局安裝在您的計(jì)算機(jī)上。

您的計(jì)算機(jī)上已安裝Vue CLI 3.0。 為此，請(qǐng)先卸載舊的CLI版本：

npm uninstall -g vue-cli

然后，安裝一個(gè)新的:

npm install -g @vue/cli

動(dòng)態(tài)組件的語(yǔ)法

Vue為動(dòng)態(tài)組件提供了一個(gè)特殊的模板元素，簡(jiǎn)稱為component。語(yǔ)法是這樣的:

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

組件元素也可以是一個(gè)自關(guān)閉標(biāo)簽:

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

第一個(gè)選項(xiàng)最適合瀏覽兼容性。

演示

下載starter項(xiàng)目并在VS代碼中打開它，以獲得一些動(dòng)態(tài)組件的示例。starter項(xiàng)目允許您訪問一個(gè)現(xiàn)有的測(cè)試組件，創(chuàng)建第二個(gè)測(cè)試組件，并在兩者之間進(jìn)行切換。

導(dǎo)航到components文件夾并創(chuàng)建一個(gè)新文件。 將文件命名為Test2.vue并將以下代碼塊復(fù)制到文件中：

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

現(xiàn)在您有了第二個(gè)組件，轉(zhuǎn)到App.vue文件并注冊(cè)該組件:

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

兩個(gè)測(cè)試組件現(xiàn)在嵌套在根應(yīng)用程序組件中。如果只想掛載一個(gè)組件，然后動(dòng)態(tài)切換到另一個(gè)組件，則必須創(chuàng)建一個(gè)動(dòng)態(tài)組件。

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

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

接下來，使用以下serve命令運(yùn)行應(yīng)用程序:

npm run serve

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

如果僅在模板中指定了Test 1元素，這正是您將獲得的響應(yīng)。 為了使組件具有動(dòng)態(tài)性，我們可以使用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>

您的組件現(xiàn)在與數(shù)據(jù)中的組件屬性綁定。如果您將組件切換到Test2，它將自動(dòng)掛載Test2組件。

在瀏覽器上測(cè)試一下。

添加方法調(diào)用

您可以添加方法調(diào)用來控制組件動(dòng)態(tài)顯示的邏輯。組件元素允許您訪問Vue實(shí)例中的每個(gè)構(gòu)造。

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

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

切換時(shí)保持?jǐn)?shù)據(jù)值有效

在Vue團(tuán)隊(duì)構(gòu)建這個(gè)特性時(shí)，他們選擇擴(kuò)展它的功能，包括存儲(chǔ)每個(gè)狀態(tài)的數(shù)據(jù)值。

為了存儲(chǔ)這些數(shù)據(jù)，Vue提供了一個(gè)名為keep-alive的模板元素。使用keep-alive，您可以確保在從一個(gè)組件切換回另一個(gè)組件后，您的組件狀態(tài)保持原樣。

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

要啟用keep-alive，請(qǐng)轉(zhuǎn)到app.vue文件的模板部分，并使用keep-alive元素包裝組件元素:

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

要查看它是否工作，請(qǐng)將表單元素添加到測(cè)試中。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>

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

以上是“Vue.js中如何使用動(dòng)態(tài)組件”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！