Vue元件

什麼是元件： 元件的出現，就是為了拆分Vue執行個體的代碼量的，能夠讓我們以不同的元件，來劃分不同的功能子產品，将來我們需要什麼樣的功能，就可以去調用對應的元件即可；

元件化和子產品化的不同：

子產品化： 是從代碼邏輯的角度進行劃分的；友善代碼分層開發，保證每個功能子產品的職能單一；

元件化： 是從UI界面的角度進行劃分的；前端的元件化，友善UI元件的重用；

如果要使用元件，直接，把元件的名稱，以 HTML 标簽的形式，引入到頁面中，即可

注意:不論是哪種方式建立出來的元件,元件的 template 屬性指向的模闆内容,必須有且隻能有唯一的一個根元素

使用 Vue.extend 配合 Vue.component 方法：

直接使用 Vue.component 方法：

将模闆字元串，定義到script标簽種：

同時，需要使用 Vue.component 來定義元件：

在元件中，<code>data</code>需要被定義為一個方法，例如：

在子元件中，如果将模闆字元串，定義到了script标簽中，那麼，要通路子元件身上的<code>data</code>屬性中的值，需要使用<code>this</code>來通路；

元件執行個體定義方式：

引用元件：

頁面結構：

Vue執行個體定義：

使用<code>component</code>标簽，來引用元件，并通過<code>:is</code>屬性來指定要加載的元件：

添加切換樣式：

元件執行個體定義方式，注意：一定要使用<code>props</code>屬性來定義父元件傳遞過來的資料

使用<code>v-bind</code>或簡化指令，将資料傳遞到子元件中：

原理：父元件将方法的引用，傳遞到子元件内部，子元件在内部調用父元件傳遞過來的方法，同時把要發送給父元件的資料，在調用方法的時候當作參數傳遞進去；

父元件将方法的引用傳遞給子元件，其中，<code>getMsg</code>是父元件中<code>methods</code>中定義的方法名稱，<code>func</code>是子元件調用傳遞過來方法時候的方法名稱

子元件内部通過<code>this.$emit('方法名', 要傳遞的資料)</code>方式，來調用父元件中的方法，同時把資料傳遞給父元件使用