Vue中組件的出現是為了拆分Vue實例的代碼量，讓我們用不同的組件劃分不同的功能模塊。我們在代碼中需要什麽樣的函數，只是調用相應的組件。接下來我介紹壹下全局組件和局部組件的區別，有壹定的參考作用，希望對大家有所幫助。
推薦教程:Vue教程
全局組件是指可以在應用程序的任何地方使用的組件，包括在其他組件中。
局部組件指的是沒有在全局組件中註冊的組件，所以它只能在註冊了它的組件上使用。
示例:
& ltdiv id = " app " & gt
& lt聯系我們& gt& lt/聯系我們& gt
& lt/div & gt；Vue.component('contact-us '，{ data:function(){
返回{
電子郵件:“info@mycompany.com”
};
},
模板:` 1
& ltdiv & gt
& lth 1 & gt；聯系我們& lt/h 1 & gt；
& ltp & gt請發送電子郵件至:{ { email } } & lt/p & gt；
& lt/div & gt；
`});new Vue({ El:' # app '，})；上面代碼的組件實際上是壹個全局組件，因為我們使用component方法將其註冊在全局Vue對象上。這意味著我們可以隨意使用它。
如何將全局組件設置為本地組件
首先將組件對象存儲在壹個變量中。
var contact us = { data:function(){
返回{
電子郵件:“info@mycompany.com”
};
},
模板:` 1
& ltdiv & gt
& lth 1 & gt；聯系我們& lt/h 1 & gt；
& ltp & gt請發送電子郵件至:{ { email } } & lt/p & gt；
& lt/div & gt；
`};然後在Vue的實例中，我們可以添加壹個組件屬性，包含我們要在本地註冊的組件。該屬性應該是壹個對象，並且包含配置對象的標記名和鍵值對。
新Vue({
埃爾:' #app '，
組件:{
'聯系我們':聯系我們
}});註意，在這個例子中，components屬性已經被添加到Vue實例中，但是它也可以被添加到另壹個組件中。
運行代碼後，您將看到組件已經正常工作。但是，為了證明組件是本地的而不是全局的，將添加另壹個Vue實例，並更改現有實例的選擇器。
新Vue({
El:“# app 1”，
組件:{
'聯系我們':聯系我們
}});new Vue({ El:' # app 2 '，})；& ltdiv id="app1 " >
& lt聯系我們& gt& lt/聯系我們& gt
& lt/div & gt；
& ltdiv id="app2 " >
& lt聯系我們& gt& lt/聯系我們& gt
& lt/div & gt；
現在我們只看到呈現壹次的contact組件，即使我們在模板中使用標記兩次。
它出現在Vue的第壹個實例中是因為我們已經將它註冊為本地組件，但是Vue的第二個實例不知道如何處理標簽。檢查瀏覽器的控制臺。瀏覽器報告該組件未註冊。
因此，要註冊全局組件，請使用Vue.component方法，對於本地組件，請使用Vue實例或其他組件中的components屬性。
總結: