快捷導(dǎo)航

vue 動態(tài)組件(component :is) 和 dom元素限制(is)用法說明

更新時間：2020年09月04日 16:48:18 作者：超級王子面

這篇文章主要介紹了vue 動態(tài)組件(component :is) 和 dom元素限制(is)用法說明，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧

一、is的使用

參考Vue 2.0教程，有講到 is 的使用：

解析 DOM 模板時的注意事項

有些 HTML 元素，諸如 <ul>、<ol>、<table> 和 <select>，對于哪些元素可以出現(xiàn)在其內(nèi)部是有嚴(yán)格限制的。而有些元素，諸如 <li>、<tr> 和 <option>，只能出現(xiàn)在其它某些特定的元素內(nèi)部。

這會導(dǎo)致我們使用這些有約束條件的元素時遇到一些問題。例如：

<table>
 <blog-post-row></blog-post-row>
</table>

這個自定義組件 <blog-post-row> 會被作為無效的內(nèi)容提升到外部，并導(dǎo)致最終渲染結(jié)果出錯。幸好這個特殊的 is 特性給了我們一個變通的辦法：

<table>
 <tr is="blog-post-row"></tr>
</table>

可以看出，is提供了一個途徑，讓我們用自定義組件，替換其他的HTML元素。使用時只需加上屬性 is="自定義組件名"。

在這種為了解除dom元素限制，自由渲染自定義組件的場景下，僅需渲染一次，所以is的值寫死為自定義組件的名稱就可以了。

另外有些交互場景，是需要動態(tài)切換視圖組件的。

二、動態(tài)組件：is的使用

上面講了利用is講元素替換為自定義組件的用法。

若某個數(shù)據(jù)結(jié)構(gòu)對應(yīng)的HTML視圖要求根據(jù)請求數(shù)據(jù)內(nèi)容或者用戶的選擇，來渲染出不同的視圖，就需要我們進行動態(tài)渲染。

比如：獲取了后臺的表格數(shù)據(jù)，可以根據(jù)用戶的選擇切換渲染成表單展示還是列表展示。

此時可以將is的值綁定為一個變量，is就變成了v-bind:is="變量名"，即：is="變量名"。當(dāng)變量名賦值為哪個自定義組件名時，擁有：is=“變量名”屬性的元素就會渲染為哪個組件。由于is的值不再是一章節(jié)中的靜態(tài)的值，而是進行了數(shù)據(jù)綁定，所以綁定的變量要在data中定義過的。

動態(tài)組件的使用場景往往比第一章的解除dom元素限制的場景要復(fù)雜一點。雖然is屬性在常用的HTML元素上都可以使用的，但常見的解除dom元素限制的場景使用元素一般為<li><option>等。vue為動態(tài)組件的使用場景提供了<component>元素。

若要在切換中緩存保留動態(tài)渲染組件的狀態(tài)，可以用<keep-alive>元素將動態(tài)組件包裹。舉個例子：

<!-- 失活的組件將會被緩存！-->
<keep-alive>
 <component v-bind:is="currentTabComponent"></component>
</keep-alive>

補充知識：vue 利用component組件和is屬性實現(xiàn)動態(tài)組件

我剛學(xué)了一種 vue 新的布局方式，通過config配置，利用component組件和is屬性來控制頁面里面展示內(nèi)容，在這里簡單做一個 dome

1，首先新建一些組件的vue頁面

這個文件的目錄，其中component中的是頁面展示的組件

src
 assets // 靜態(tài)文件
 component // 組件文件
  BaseInfo.vue
  OpenInfo.vue
  CommentReview.vue
  OrderInfo.vue
 config // 配置文件
  index.js
 view // 頁面內(nèi)容
  index.vue

這里展示一下組件中的內(nèi)容

<template>
 // 其他頁面也一樣，只有背景色與頁面的展示名不同，這就不一一介紹了
 <div class="content">我是 OpenInfo 頁面</div>
</template>
<script>

export default {
 name:'openInfo'
 data() {
 return {};
 }
};
</script>
<style scoped>
.content {
 display: flex;
 justify-content: space-between;
 width: 1000px; 
 height: 200px;
 background-color: green;
}
</style>

2，config 文件中的配置

const open = function () {
 const vm = this
 return [
  {
  // type：‘' 可以通過type類型來判斷展示那些組件內(nèi)容
  modules: [
   {
   id: 'baseInfo',
   refName: 'baseInfo',
   component: () => import('@/component/open/BaseInfo')
   },
   {
   id: 'lineInfo',
   refName: 'lineInfo',
   component: () => import('@/component/open/OpenInfo')
   },
   {
   id: 'reviewInfo',
   refName: 'reviewInfo',
   component: () => import('@/component/open/CommentReview')
   },
   {
   id: 'orderInfo',
   refName: 'orderInfo',
   component: () => import('@/component/open/OrderInfo')
   }
  ]
  }
 ]
 }
 
 export const openModules = vm => {
 return open.call(vm)
 }

3，展示頁面中的操作

<template>
 <div class="content">
 <div>我是 index</div>
 <div v-for="(content,index) in openListValue" :key="index">
 <!-- component標(biāo)簽創(chuàng)建動態(tài)組件，is屬性指向誰，就顯示哪個組件 -->
  <component :key="content.index"
  :is="content.component" 
  :ref="content.refName"
  :refName="content.refName"
  ></component>
 </div>
 </div>
</template>
<script>
import { openModules } from "@/config/index";

export default {
 data() {
 return {
  openList: [],
  openListValue: []
 };
 },
 mounted() {
 this.getList();
 },
 methods: {
 getList() {
  this.openList = openModules(vm)[0];
  this.openListValue = this.openList.modules;
 }
 }
};
</script>
<style scoped>
.content {
 padding-top: 20px;
 display: flex;
 flex-direction: column;
 width: 1000px;
}
</style>

頁面展示：