vue的組件，過濾器，監聽屬性，生命周期函數 vue有局部組件和全局組件，這個組件後期用的會比較多，也是非常重要的 局部組件 template與components屬性結合使用掛載 ...
組件
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的組件，看著知識點多，有點繞，但還是基礎，且是非常重要的基礎，一定要註意以上提到的註意點
