vue（3）—— vue的全局組件、局部組件

組件

vue有局部組件和全局組件，這個組件後期用的會比較多，也是很是重要的

局部組件

 

template與components屬性結合使用掛載

 

 

其中 Vmain、Vheader、Vleft、Vcontent都是局部組件，Vheader、Vleft、Vcontent是一塊兒掛載在Vmain組件上的，這裏的Vmain能夠當作一個入口組件，再將入口組件掛載在Vue實例對象上，就能夠渲染成一個頁面了

 

固然這裏我沒有給css屬性，看着很差看，感興趣的本身去添加就好了，而且這裏使用組件渲染頁面時，由於使用的是template屬性，因此el掛載點失效

 

利用內置組件<component :is="componentId"></component> 掛載使用

 

固然你說我就要掛載在app下呢？因此這裏又有另外一種寫法，使用<component>標籤，裏面用v-bind綁定一個is屬性，is屬性值對應組件的名字，用引號包住：

 

這樣的寫法，就能夠直接哪裏須要組件，直接給一個<component>標籤就好了，而Vue實例化對象裏不用掛載，也不用使用template屬性渲染了

 

這種寫法按照官方文檔，它是一個內置的組件（也就是自帶的，不須要我本身定義直接使用的）：

 

  

組件還能夠複用：

 

一個組件內的data必須是一個函數：

你若是在組件內想使用data那就用函數就完了，能夠用單體模式定義data的函數，如：

 

 

注意：

1.組件的使用步驟：

• 建立一個組件
• 掛載組件
• 使用組件

2.組件使用時，就是組件的名字做爲標籤，而且是單標籤，且必需要有閉合符號【/】

3.組件能夠複用

4.組件內的data必須是一個函數

5.組件是一個單向數據流

6.定義組件名避免和html元素重合，致使一些沒必要要的事情發生

 

組件的組成結構是這樣的：

像如上的結構，在Vmain組件裏又掛載了三個子組件，這些組件其實也徹底能夠直接掛載在Vue實例對象裏啊，能夠是能夠的，我舉個生活的例子來講明，好比你是老闆，你有個通知要通知給你的每一個員工，你是要本身去挨個通知呢？仍是找個負責人，讓他帶你挨個通知呢？能理解了吧？

理解以後，看官方給的組件結構：

 

 

也就是是說，數據傳輸是單向的，一級一級的傳遞，爲何這麼說呢？看完下面的傳遞參數你就懂了

 

 

 

父級組件傳遞參數給子級組件

父向子傳參，須要使用props屬性：

  

 

 步驟：

1.定義好須要傳遞的參數

2.在template模板裏用v-bind綁定好屬性

3.在Vue實例綁定的入口組件裏添加 props屬性，裏面寫入Vue實例傳遞過來的的參數的鍵（注意是鍵不是值）

4.在利用props屬性接收到的組件裏綁定屬性，鍵爲自定義鍵，值爲props父級組件傳遞過來的的鍵

5.在子級裏一樣的利用props接收參數

6.是否須要再往子級組件傳遞參數，若是要，再用v-bind綁定屬性，屬性的鍵自定義，值爲父級傳遞過來的鍵，若是再也不傳遞，直接用jinja2語法渲染到標籤元素裏

 

一樣的，若是要使用component內置組件來渲染，直接掛載到元素裏，其餘沒作任何改動：

 

子級向父級傳遞參數

 

在之後的開發中，可能會遇到，子級會向父級反饋數據的狀況，因此，子級向父級傳遞參數這個功能仍是挺有用的。

可是本質上並非直接傳輸，而是經過v-on監聽事件傳輸的，結合Vue實例裏的$emit實現的。這個$emit是Vue實例裏自帶的，$emit()方法來觸發自定義的事件， 第一個參數是自定義的事件名字 第二個參數就是傳遞的值，其中this指的vue實例化對象的子類

 

 

如上，父級的Vmain組件確實拿到了，並在控制檯輸出了

 

注意：

 

1.子級組件根據子級的邏輯向父級傳遞的參數，使用的是this.$emit方法，有關$emit的方法，傳送門 

通俗的說，你能夠理解爲this.$emit就是一個數據通道，能夠鏈接子級組件和父級組件

2.父級組件中v-on綁定的方法名必須和$emit()第一個參數的事件名一致，便可以理解爲自定的監聽事件，以後則能夠經過這個事件接收到子級傳來的參數了

 

全局組件

 

全局組件，顧名思義了，很少解釋了 

 

全局組件定義好後不須要掛載（或者叫註冊），直接可使用，使用的全局組件名做爲標籤，且是雙標籤

 

那前面的局部組件用了另外一種渲染方式，使用了<component>標籤，你可能會想，這裏全局也用<component>標籤會怎麼樣呢？不行的，會報錯，提示未定義

 

因此你須要在data裏先定義一下就行：

 

 

  

 

定義全局組件的其餘三個方法

 

利用script標籤（比較少見）

 

利用Vue.extend和Vue.component

 

利用template標籤

這個之後在組件化開發中用的不少

 

 

 

動態組件：

動態組件是利用component結合全局組件作出來的，官方解釋：

 

以下，點頭部，頁面就顯示成頭部內容，點底部，就顯示成了底部內容

 

這裏的a標籤我綁定了一個v-on，阻止了冒泡事件啊，就是前面的知識點了，詳細的很少說

 

 

全局組件也能夠被局部組件使用，而且複用：

 

插槽<slot>

可是，若是複用全局組件就有一個問題，由於在實際開發中，有公用的元素就可使用公用的，好比繼承一個公用的css屬性什麼的，可是每一個內容部分都有不一樣的數據，或者說須要在公用的基礎上作些本身適當的調整嗎，像這種需求是不少的。好比以下，我想顯示不一樣的內容這樣就沒法顯示內容：

 

 

 

因此這裏須要用到內置組件<slot>，以下，其餘沒作任何更改，只是在建立全局組件部分插入了一個<slot></solt>組件便可顯示咱們想要顯示的內容

 

 

 

而後，其餘就沒什麼須要注意的了，由於全局組件的用法其實跟局部組件的用法是同樣的

 

 

總結：

vue的組件，看着知識點多，有點繞，但仍是基礎，且是很是重要的基礎，必定要注意以上提到的注意點