components怎么用

小編給大家分享一下components怎么用，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

　　components是什么意思根據名字猜想

　　newVue({

　　el:'#app',

　　router:router,

　　components:{App},

　　template:'<App/>'

　　});

　　代碼塊中

　　components:{App},

　　template:'<App/>'

　　的作用為引入組件和使用組件，在相繼注釋這兩行代碼后都出現了頁面消失的情況

　　在加入自定義組件后準備測試猜想

　　注意需要有變量接收這個組件：

　　如下圖，修改引入組件：

　　保存運行：

　　結論：

　　由此可知：

　　components:{App}意思為引入組件，組件可以寫在別的文件中，也可以寫在本文件中，需要賦值給變量

　　template:‘<App/>’意思為替換掛載的元素為引入的組件，具體為何或如何寫成一個標簽參考vue官方文檔-組件基礎

　　其他：

　　和在掛載的標簽內直接引用<aaa></aaa>的方式使用組件不同，template:‘<App/>’會將掛載的元素整個替換

　　<aaa></aaa>的方式使用組件：

　　template:'<App/>'的方式使用組件

　　注意components是什么意思

　　在官方文檔中有說明，組件有全局和局部的注冊之分，此處所用的是全局注冊，若是局部注冊，則應該寫成

　　varaaa={

　　 template:`<div>aaa</div>`

　　}

　　在components中引入可以寫成

　　components:{

　　 'aaa':aaa

　　}

　　//也可以直接寫

　　components:{

　　 aaa

　　}

　　這兩者的區別在于，前者的屬性名就是自定義元素的名字，如寫成

　　components:{

　　 'sss':aaa

　　則使用組件時，自定義元素標簽應該改成<sss></sss>

　　而屬性值就是標簽所引用的組件對象

　　后者則默認將組件名作為自定義元素標簽名

　　在ES2015+中，在components中放一個組件的變量名ComponentA(本例子中的aaa)其實是ComponentA:ComponentA的縮寫

　　即這個變量名同時是：

　　用在模板中的自定義元素的名稱

　　包含了這個組件選項的變量名

以上是“components怎么用”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！