【Vue】元件使用之is

LJTin發表於2018-11-20
Vue元件
 有些 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> 複製程式碼

需要注意的是如果我們從以下來源使用模板的話，這條限制是不存在的： 

  1. 字串 (例如：template: '...') 
  2. 單檔案元件 (.vue) 
  3. <script type="text/x-template">


本文旨在個人學習並記錄，如有侵權，請聯絡告知，謝謝！

相關文章