溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
使用vue dom元素限制(is)和動態組件(component :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>頁面展示：
看完上述內容是否對您有幫助呢？如果還想對相關知識有進一步的了解或閱讀更多相關文章，請關注億速云行業資訊頻道，感謝您對億速云的支持。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
