vue3注冊組件 vue組件全局注冊和局部注冊 _vue組件全局注冊和局部注冊

文章插圖

文章插圖
【vue3注冊組件 vue組件全局注冊和局部注冊】1. 認識Vue組件
組件系統是 Vue 的另一個重要概念，因為它是一種抽象，允許我們使用小型、獨立和通常可復用的組件構建大型應用。

仔細想想，幾乎任意類型的應用界面都可以抽象為一個組件樹：

1.1 組件是什么
組件就是一段獨立的,能代表頁面某一個部分的代碼片段, 擁有自己獨立的數據,JavaScript腳本,以及樣式的標簽.
1.2 組件的好處:提高開發效率方便重復使用便于協同開發更容易被管理和維護1.3 組件創建的基本步驟
Vue.js的組件的使用有3個步驟：創建組件構造器、注冊組件和使用組件

1.4 示例
通過一個示例來了解組件的使用
使用Vue的component方法注冊全局組件

<div id="app-one"><!-- 3.在實例中使用組件 --><greeting></greeting></div><script>// 1. 組件構造器let MyComponent= Vue.extend({// 配置對象// 因為組件沒有掛在點,所以使用模板,只有一個根節點template: `<div><p>大家好,我叫{{name}}</p><button @click="changeName">點擊換名字</button></div>`,data: function(){return {name:"渣渣輝"}},methods:{changeName(){this.name = "古天樂"}}})// 2. 通過Component方法,將構造器擴展的構造函數創建組件實例Vue.component("Greeting",MyComponent)// Vue 實例const vm = new Vue({el:"#app-one",})</script>

顯示結果:

1.5 理解組件的創建和注冊Vue.extend()是Vue構造器擴展，調用Vue.extend()創建的是一個組件構造器，而不是具體的組件實例。Vue.extend()構造器有一個選項對象，選項對象的template屬性用于定義組件要渲染的HTML模板。使用Vue.component()注冊組件時，需要提供2個參數，第1個參數時組件的名，第2個參數是組件構造器。Vue.component()方法內部會調用組件構造器，創建一個組件實例。組件應該掛載到某個Vue實例下，否則它不會生效。1.6 Vue構造器擴展直接創建Vue實例
Vue.extend 方法相當于是對于原有的Vue 構造函數進行了擴展, 本質上核心還是Vue的構造函數,所以我們可以直接通過擴展的構造函數創建Vue實例

<div id="app"></div><script>// 1. 通過組件構造器擴展構造函數let MyComponent= Vue.extend({// 配置對象// 因為組件沒有掛在點,所以使用模板,只有一個根節點template: `<div><p>大家好,我叫{{name}}</p><button @click="changeName">點擊換名字</button></div>`,data: function(){return {name:"渣渣輝"}},methods:{changeName(){this.name = "古天樂"}}})// 2. 通過擴展的構造函數創建Vue實例new MyComponent({el:'#app'})</script>

示例說明:
Vue組件其實也是Vue實例,只不過沒有掛在點, 通過template處理需要渲染的DOM但是組件實例必須有一個名字, 通過這個名字在Vue實例中使用, 通過自定定義標簽方式使用組件
在vue中,一個自定義標簽 vue就會把它看成一個組件,vue可以給這些標簽賦予一定的意義
1.7 直接通過選項對象創建組件
其實所有的Vue的組件同時也都是Vue的實例.所以組件可接受的相同選項對象.因此我們在創建組件的過程中也就沒有必要每次都通過構造器擴展Vue構造函數
直接把構造器的選項對象作為第二個參數傳遞給Vue.component就可以
示例如下:

// 創建組件Vue.component("Greeting",{template: `<div><p>大家好,我叫{{name}}</p><button @click="changeName">點擊換名字</button></div>`,data: function(){return {name:"渣渣輝"}},methods:{changeName(){this.name = "古天樂"}}})

使用組件
<div id="app-one"><greeting></greeting></div>推薦使用這種方式創建組件.
注意事項:
組件名稱不能起和HTML合法標簽相同的名字，如p,如果組件名跟HTML合法標簽同名, 會默認解析為合法的標簽,因此會將p識別為普通的標簽,而不是自定義標簽,因此就不會被當成組件處理, 同時還會報錯1.8 組件的分類全局組件 : 可以聲明一次在任何地方使用(一般寫插件的時候全局使用的多一點)局部組件: 必須告訴這個組件屬于誰(一般用局部比較好)
那么接下來就讓我們好好理解一些全局組件和局部組件的使用
2. 全局組件
通過剛才的實例,對于全局組件相信你們已經有了一定的了解
調用Vue.component()注冊組件時，組件的注冊是全局的，這意味著該組件可以在任意Vue示例下使用。
通過示例了解全局組件的使用
2.1 創建全局組件
通過Vue.component 方法注冊全局組件, 組件名稱建議使用大駝峰命名

//在js中定義組件名時使用大駝峰式命名,// 但是在標簽html中里使用時盡量用連字符-Vue.component('MyCom', {template: `<div>這是全局組件的內容</div>`})

2.2 創建多個Vue實例
// 實例一new Vue({el:"#app-one",})// 實例二new Vue({el:"#app-two",})2.3 在多個Vue實例中使用全局組件

<div id="app-one"><!-- 是使用組件的時候要把大駝峰轉為連字符的方式使用 --><my-com></my-com><!--如果使用了如下的方式就會報錯,--><!-- <MyCom></MyCom> --></div><div id="app-two"><!-- 如果自定義標簽里面沒有嵌套內容可以寫成單標簽的形式 --><my-com /></div>

2.4 注意事項
相信你們看到了我們注冊組件的時候使用的組件名是一個駝峰寫法的方式,此時使用組件時的自定義標簽中不能使用駝峰寫法會報錯的, 因為HTML不能識別大小寫, 會將你寫的<MyCom>識別為<mycom>這樣就找不到組件了,因此會在控制臺報錯
但是我們可以在定義組件的使用使用連字符的方式定義組件名
示例代碼如下:

<div id="app-two"><!-- 使用組件 --><my-com /></div><script>//使用連字符定義組件名Vue.component('my-com', {template: `<div>這是全局組件的內容</div>`})// Vue實例化new Vue({el:"#app",})</script>

通過示例,我們了解了定義組件是使用連字符和駝峰命名都可以,但是在HTML標簽里使用組件的使用一定只能寫成連字符的方式.
關于組件名說明:
雖然在定義組件時我們可以使用連字符命名,但是不推薦,推薦的使用方式是,定義組件使用駝峰方式, 使用組件使用連字符方法.
至于為什么, 您接著往下看.
3. 局部組件
有的時候我們并不希望組件在所有的實例中都能使用, 那么我們就可以將組件定義為局部組件
3.1 局部組件使用三步曲創建局部配置,注冊局部組件使用局部組件3.2 使用構造器創建并使用局部組件
我們可以使用構造器創建局部組件,
示例代碼如下:

<div id="app-one"><!-- 3. 在注冊了局部組件的實例中使用局部組件 --><my-component></my-component></div><div id="app-two"><!-- 當前的這個實例并沒有注冊局部組件,所以會報錯 --><my-component></my-component></div><script>// 1. 使用構造器創建組件配置let MyComponent = Vue.extend({template: `<div><h2>我想被創建為局部組件</h2></div>`,})// 注冊局部組件的實例const vm = new Vue({el:"#app-one",// 2. 注冊為只能在當前實例中使用的局部組件components: {"my-component": MyComponent}})// 沒有注冊局部組件的實例new Vue({el:"#app-two",})</script>

示例說明:
通過extend方法創建Vue構造器在Vue選項對象中,通過components選項將構造器創建為局部組件,components選項值是一個對象,對象的屬性是組件的名稱,值是將要被創建為組件的構造器或選項對象沒有注冊局部組件的實例對象是不能使用其它實例中的局部組件,
因此示例的實例中app-two中是不能使用組件my-component的,會報錯
3.3 直接通過選項對象來創建組件
前一小節有講過我們可以直接將選項對象注冊為全局組件, 同樣的我們也可以直接將選項對象注冊為局部組件,Vue內部會將選項對象進行處理
示例代碼如下:

<div id="app-one"><!-- 3. 在注冊了局部組件的實例中使用局部組件 --><my-component></my-component></div><script>// 1. 創建局部組件的選項對象let MyComponent = {template: `<div><h2>我想被創建為局部組件</h2></div>`,}const vm = new Vue({el:"#app-one",// 2. 將選項對象注冊為局部組件components: {"my-component": MyComponent}})</script>

通過對比我們就會發現直接將選項對象注冊為局部組件要來的簡單一點,所以推薦使用選項對象創建組件的方式,無論是全局組件還是局部組件
這種使用選項對象直接注冊為組件的方式被稱作為組件注冊語法糖