1. 程式人生 > >vue中is的作用和用法

vue中is的作用和用法

回顧vue官方文件的過程中發現了is這個特性,雖然以我的寫程式碼風格實在用不上,不過還是記錄一下這個知識點

is的作用


 <ul>
  <li></li>
  <li></li>
  <li></li>
</ul>

總所周知,ul裡面巢狀li的寫法是html語法的固定寫法(還有如table,select等)。


//code1
 <ul>
  <my-component></my-component>
  <my-component></my-component>
</ul>

my-component是我們自己寫的元件,但是html在渲染dom的時候,my-component對ul來說並不是有效的dom,甚至會報錯。

is的誕生

正是因為html模板的限制,於是就誕生了is。接下來我們就用is解決上面的問題~


 <ul>
  <li is='my-component'></li>
</ul>

首先你得註冊my-component元件,全域性或者區域性都成。 <li is='my-component'></li>其實就相當於<my-component></my-component>,語義上是一樣一樣的,就是解決了html模板的限制。

is的用法

<component> + is 的騷操作


&lt;!-- 元件會在 `件名` 改變時改變 --&gt;
&lt;component :is="元件名變數"&gt;&lt;/component&gt;

只要在data里弄個變數,給變數賦值就能動態的切換元件。這個其實在某些場景還是非常好用的安利一下。

不受html模板限制的情況

vue官網提醒以下來源使用模板的話,這條限制是不存在的:
字串 (例如:template: '...')
單檔案元件 (.vue)
<script type="text/x-template">
也就是說只有在用cdn方式寫vue的時候才會出現這種問題?開發基本用框架,好像沒啥事的樣子。
哈哈哈~到此結束,祝你生活愉快

原文地址:https://segmentfault.com/a/1190000017262264