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

寧安網(wǎng)站制作公司哪家好，找創(chuàng)新互聯(lián)建站！從網(wǎng)頁設(shè)計、網(wǎng)站建設(shè)、微信開發(fā)、APP開發(fā)、成都響應(yīng)式網(wǎng)站建設(shè)等網(wǎng)站項目制作，到程序開發(fā)，運營維護。創(chuàng)新互聯(lián)建站2013年至今到現(xiàn)在10年的時間，我們擁有了豐富的建站經(jīng)驗和運維經(jīng)驗，來保證我們的工作的順利進行。專注于網(wǎng)站建設(shè)就選創(chuàng)新互聯(lián)建站。

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

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

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

動態(tài)組件

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

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

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

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

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

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

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

已安裝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

動態(tài)組件的語法

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

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

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

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

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

演示

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

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

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

現(xiàn)在您有了第二個組件，轉(zhuǎn)到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>

兩個測試組件現(xiàn)在嵌套在根應(yīng)用程序組件中。如果只想掛載一個組件，然后動態(tài)切換到另一個組件，則必須創(chuà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īng)用程序:

npm run serve

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

如果僅在模板中指定了Test 1元素，這正是您將獲得的響應(yī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，它將自動掛載Test2組件。

在瀏覽器上測試一下。

添加方法調(diào)用

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

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

<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ù)值有效

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

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

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

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

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

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

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

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

結(jié)論

本文介紹了如何在Vue.js工作流中使用動態(tài)組件。您現(xiàn)在還可以通過keep-alive擴展組件元素的能力。

相關(guān)推薦：

2020年前端vue面試題大匯總（附答案）

vue教程推薦：2020最新的5個vue.js視頻教程精選

更多編程相關(guān)知識，請訪問：編程入門?。?

當(dāng)前題目：Vue.js中使用動態(tài)組件的方法
網(wǎng)站地址：http://vcdvsql.cn/article42/chceec.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供服務(wù)器托管、用戶體驗、網(wǎng)站營銷、云服務(wù)器、網(wǎng)站維護、網(wǎng)站設(shè)計

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)