一、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)用法說明就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持好吧啦網。