Vue組件的is具體用法

1.爲何要使用is

　　在vue的官網組件部分中，有明確的描述：當使用 DOM 做爲模板時 (例如，使用 el 選項來把 Vue 實例掛載到一個已有內容的元素上)，你會受到 HTML 自己的一些限制，由於 Vue 只有在瀏覽器解析、規範化模板以後才能獲取其內容。尤爲要注意，像 <ul>、<ol>、<table>、<select> 這樣的元素裏容許包含的元素有限制，而另外一些像 <option> 這樣的元素只能出如今某些特定元素的內部。通俗一點講，就是「龍生龍，鳳生鳳，老鼠的兒子會打洞」，特殊的一下父元素如<ul>、<ol>、<table>、<select>裏面不能包含不屬於它的子元素，而與之相對應的<li>、<tr>、<option>只能夠出如今特定的父元素裏面。

　　那麼，有人會問了，這和咱們的is有半毛錢關係麼？普通的時候是沒有一毛錢關係的，可是在許多特定的時候，有直接的關係。

　　咱們在日常的代碼中，通常不會將tr封裝爲一個組件去使用，能夠直接使用「v-for」指令去完成對選項列表的渲染。可是，當咱們有了特定的需求的要求，好比這個tr的子元素td的一些部分我須要進行操做，可是tr的數量可能不少條或者不明確tr的數量時，咱們沒法對其操做項進行綁定，那麼咱們只能對其進行組件化，將其封裝成一個組件，使用特定的方式好比this.$emit加porps的方式進行數據交流。

　　那麼問題就出現了，以下：

　　我在定義了子組件my-tr：

　　並在父組件中用正常的方式引用，Vue.component('my-tr', Tr)：

　　彷彿一切都是正確的，可是當咱們看到效果的時候就會發現：

　　此時檢查DOM結構就會發現<tr>未在<table>中。

　　問題就出在了文章開始咱們說的：像 <ul>、<ol>、<table>、<select> 這樣的元素裏容許包含的元素有限制，而另外一些像 <option> 這樣的元素只能出如今某些特定元素的內部。在自定義組件中使用這些受限制的元素時會致使一些問題，例如：

<table> <my-row>...</my-row> </table>

　　自定義組件 <my-row> 會被看成無效的內容，所以會致使錯誤的渲染結果。變通的方案是使用特殊的 is 特性：

<table> <tr is="my-row"></tr> </table>

　　應當注意，若是使用來自如下來源之一的字符串模板，則沒有這些限制：

• <script type="text/x-template">
• JavaScript 內聯模板字符串
• .vue 組件

　　所以，請儘量使用字符串模板。

　　這就用到了本文的中心「is」，當咱們使用<tr is="my-tr" v-for="(man,key) in mans" :man="man" :key="key"></tr>引入插件，而不是<my-tr></my-tr>時，一切就正常了。