vue中is的做用和用法

回顧vue官方文檔的過程當中發現了is這個特性,雖然以個人寫代碼風格實在用不上,不過仍是記錄一下這個知識點html

is的做用

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

總所周知,ul裏面嵌套li的寫法是html語法的固定寫法(還有如table,select等)。vue

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

my-component是咱們本身寫的組件,可是html在渲染dom的時候,my-component對ul來講並非有效的dom,甚至會報錯。框架

is的誕生

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

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

首先你得註冊my-component組件,全局或者局部都成。 <li is='my-component'></li>其實就至關於<my-component></my-component>,語義上是同樣同樣的,就是解決了html模板的限制。code

is的用法

<component> + is 的騷操做

<!-- 組件會在 `件名` 改變時改變 -->
<component :is="組件名變量"></component>

只要在data里弄個變量,給變量賦值就能動態的切換組件。這個其實在某些場景仍是很是好用的安利一下。component

不受html模板限制的狀況

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

相關文章
相關標籤/搜索