vue2.0中的:is和is的區別
阿新 • • 發佈:2018-11-05
此文首發於 lijing0906.github.io/
最近,工作之餘在翻閱vue.js的官方文件,在檢視到動態元件和解析 DOM 模板時的注意事項的時候,講到一個特殊的is特性,覺得很有意思,就來寫一篇自己理解的總結。
現場
寫栗子實踐
其實看過之後,其實是有點懵的,這兩個有啥區別,怎麼用呢?
仔細分析,沒那麼難懂,參考這篇部落格,我們也寫一個栗子來試試
我們平時用區域性註冊的情況更多些,那我就寫一個區域性註冊元件的栗子。
替換部分內容看渲染結果
-
單獨看自定義元件componentA,把is="componentA"改成is="componentB",會發現這部分的內容由原來的元件componentA的內容變成了componentB的內容
-
單獨看自定義元件componentB,在父元件中能看到,是:is,這是資料繫結,那麼被繫結的值必須在當前例項的data中定義。栗子中繫結的是two,two的值是什麼那componentB就渲染什麼。
最後
舉栗子實踐分析了一番,總算明白了一些,總結一下:
- 相同點:都能實現動態元件的效果
- 不同點::is是資料繫結,繫結的值必須在data中定義,is被賦值的值須是子元件的名稱