vue 動態元件(component :is) 和 dom元素限制(is)用法說明
一、is的使用
參考Vue 2.0教程，有講到 is 的使用：
解析 DOM 模板時的注意事項
有些 HTML 元素，諸如 <ul>、<ol>、<table> 和 <select>，對於哪些元素可以出現在其內部是有嚴格限制的。而有些元素，諸如 <li>、<tr> 和 <option>，只能出現在其它某些特定的元素內部。
這會導致我們使用這些有約束條件的元素時遇到一些問題。例如：
<table> <blog-post-row></blog-post-row> </table>
這個自定義元件 <blog-post-row> 會被作為無效的內容提升到外部，並導致最終渲染結果出錯。幸好這個特殊的 is 特性給了我們一個變通的辦法：
<table> <tr is="blog-post-row"></tr> </table>
可以看出，is提供了一個途徑，讓我們用自定義元件，替換其他的HTML元素。使用時只需加上屬性 is="自定義元件名"。
在這種為了解除dom元素限制，自由渲染自定義元件的場景下，僅需渲染一次，所以is的值寫死為自定義元件的名稱就可以了。
另外有些互動場景，是需要動態切換檢視元件的。
二、動態元件 ：is的使用
上面講了利用is講元素替換為自定義元件的用法。
若某個資料結構對應的HTML檢視要求根據請求資料內容或者使用者的選擇，來渲染出不同的檢視，就需要我們進行動態渲染。
比如：獲取了後臺的表格資料，可以根據使用者的選擇切換渲染成表單展示還是列表展示。
此時可以將is的值繫結為一個變數，is就變成了v-bind:is="變數名"，即 ：is="變數名"。當變數名賦值為哪個自定義元件名時，擁有：is=“變數名”屬性的元素就會渲染為哪個元件。由於is的值不再是一章節中的靜態的值，而是進行了資料繫結，所以繫結的變數要在data中定義過的。
動態元件的使用場景往往比第一章的解除dom元素限制的場景要複雜一點。雖然is屬性在常用的HTML元素上都可以使用的，但常見的解除dom元素限制的場景使用元素一般為<li><option>等。vue為動態元件的使用場景提供了<component>元素。
若要在切換中快取保留動態渲染元件的狀態，可以用<keep-alive>元素將動態元件包裹。舉個例子：
<!-- 失活的元件將會被快取！--> <keep-alive> <component v-bind:is="currentTabComponent"></component> </keep-alive>
補充知識：vue 利用component元件和is屬性實現動態元件
我剛學了一種 vue 新的佈局方式，通過config配置，利用component元件和is屬性來控制頁面裡面展示內容，在這裡簡單做一個 dome
1，首先新建一些元件的vue頁面
這個檔案的目錄，其中component中的是頁面展示的元件
src assets // 靜態檔案 component // 元件檔案 BaseInfo.vue OpenInfo.vue CommentReview.vue OrderInfo.vue config // 配置檔案 index.js view // 頁面內容 index.vue
這裡展示一下 元件中的內容
<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型別來判斷展示那些元件內容
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標籤建立動態元件，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>
頁面展示：
注：這裡配置可以用多個，給他配置裡設定一個 type ，通過 type 型別，來控制展示的是那些介面。這裡就不多介紹了
以上這篇vue 動態元件(component :is) 和 dom元素限制(is)用法說明就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支援我們。