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>時,一切就正常了。

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM