vue2.0中的：is和is的區別

此文首發於 lijing0906.github.io

最近，工作之餘在翻閱vue.js的官方文件，在檢視到動態元件和解析 DOM 模板時的注意事項的時候，講到一個特殊的is特性，覺得很有意思，就來寫一篇自己理解的總結。

現場

寫栗子實踐

其實看過之後，其實是有點懵的，這兩個有啥區別，怎麼用呢？

仔細分析，沒那麼難懂，參考這篇部落格，我們也寫一個栗子來試試

我們平時用區域性註冊的情況更多些，那我就寫一個區域性註冊元件的栗子。

替換部分內容看渲染結果

1. 單獨看自定義元件componentA，把is="componentA"改成is="componentB"，會發現這部分的內容由原來的元件componentA的內容變成了componentB的內容

   

   這裡我們會發現，雖然標籤是< componetA>,但是沒有顯示componentA的內容，而是顯示componentB的內容，說明vue在渲染元件的內容時，是有檢測is特性的，如果有被賦值那就渲染該值對應的元件的內容，如果沒有is特性，那就渲染標籤對應的元件內容。 那麼如果把< componetA>換成< div>、< p>等等符合W3C的標籤都能正常顯示is被賦值的元件的內容！這樣就與解析 DOM 模板時的注意事項不謀而合了！

2. 單獨看自定義元件componentB，在父元件中能看到，是：is,這是資料繫結，那麼被繫結的值必須在當前例項的data中定義。栗子中繫結的是two，two的值是什麼那componentB就渲染什麼。

   

   同樣，如果把< componetB>換成< div>、< p>等等符合W3C的標籤都能正常顯示：is被賦值的元件的內容！這樣就是動態元件了！

最後

舉栗子實踐分析了一番，總算明白了一些，總結一下：

• 相同點：都能實現動態元件的效果
• 不同點：：is是資料繫結，繫結的值必須在data中定義，is被賦值的值須是子元件的名稱