元件
vue有局部元件和全局元件，這個元件後期用的會比較多，也是非常重要的
局部元件
template與components屬性結合使用挂載
其中 Vmain、Vheader、Vleft、Vcontent都是局部元件，Vheader、Vleft、Vcontent是一起挂載在Vmain元件上的，這裡的Vmain可以看成一個入口元件，再将入口元件挂載在Vue執行個體對象上，就可以渲染成一個頁面了
當然這裡我沒有給css屬性，看着不好看，感興趣的自己去添加就行了，并且這裡使用元件渲染頁面時，因為使用的是template屬性，是以el挂載點失效
利用内置元件 挂載使用
當然你說我就要挂載在app下呢？是以這裡又有另一種寫法，使用标簽，裡面用v-bind綁定一個is屬性，is屬性值對應元件的名字，用引号包住：
這樣的寫法，就可以直接哪裡需要元件，直接給一個标簽就行了，而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()第一個參數的事件名一緻，即可以了解為自定的監聽事件，之後則可以通過這個事件接收到子級傳來的參數了
全局元件
全局元件，顧名思義了，不多解釋了
全局元件定義好後不需要挂載(或者叫注冊)，直接可以使用，使用的全局元件名作為标簽，且是雙标簽
那前面的局部元件用了另一種渲染方式，使用了标簽，你可能會想，這裡全局也用标簽會怎麼樣呢？不行的，會報錯，提示未定義
是以你需要在data裡先定義一下就行：
定義全局元件的其他兩個方法
利用script标簽(比較少見)
利用Vue.extend和Vue.component
利用template标簽
這個以後在元件化開發中用的很多
動态元件：
動态元件是利用component結合全局元件做出來的，官方解釋：
如下，點頭部，頁面就顯示成頭部内容，點底部，就顯示成了底部内容
這裡的a标簽我綁定了一個v-on，阻止了冒泡事件啊，就是前面的知識點了，詳細的不多說
全局元件也可以被局部元件使用，并且複用：
插槽
但是，如果複用全局元件就有一個問題，因為在實際開發中，有公用的元素就可以使用公用的，比如繼承一個公用的css屬性什麼的，但是每個内容部分都有不同的資料，或者說需要在公用的基礎上做些自己适當的調整嗎，像這種需求是很多的。比如如下，我想顯示不同的内容這樣就無法顯示内容：
是以這裡需要用到内置元件，如下，其他沒做任何更改，隻是在建立全局元件部分插入了一個元件即可顯示我們想要顯示的内容
然後，其他就沒什麼需要注意的了，因為全局元件的用法其實跟局部元件的用法是一樣的
總結：
vue的元件，看着知識點多，有點繞，但還是基礎，且是非常重要的基礎，一定要注意以上提到的注意點