快捷導(dǎo)航

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

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

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

一、is的使用

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

解析 DOM 模板時(shí)的注意事項(xiàng)

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

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

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

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

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

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

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

另外有些交互場(chǎng)景，是需要?jiǎng)討B(tài)切換視圖組件的。

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

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

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

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

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

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

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

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

補(bǔ)充知識(shí)：vue 利用component組件和is屬性實(shí)現(xiàn)動(dòng)態(tài)組件

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

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

這個(gè)文件的目錄，其中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)建動(dòng)態(tài)組件，is屬性指向誰，就顯示哪個(gè)組件 -->
  <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>

頁面展示：