組件也是一個實(shí)例

組件也是一個實(shí)例，所以組件也可以定義我們之前在根實(shí)例中定義的內(nèi)容：data,methods,created，components等等。
但一個組件的 data 選項(xiàng)必須是一個函數(shù),因此每個實(shí)例可以維護(hù)一份被返回對象的獨(dú)立的拷貝

組件在某些元素中渲染出錯

在一些html元素中只允許某些元素的存在，例如tbody元素中要求有tr，而不可以有其他的元素（有的話會被提到外面）。下面是一個元素被提到外面的例子【而ul并沒有太嚴(yán)格，所以我們在前面的todo-list的例子中能夠演示成功】

下圖可以看的出來div被提到table外面了：

這是為什么呢？目前來說，我們在頁面中其實(shí)是先經(jīng)過html渲染再經(jīng)過vue渲染的(后面項(xiàng)目話后是整體渲染成功再展示的)，當(dāng)html渲染時，它就發(fā)現(xiàn)了tr里面有一個“非法元素”，所以它就把我們自定義的組件提到了table外面。
解決方案：
使用tr元素，元素里面有屬性is，is的值是我們要使用的組件名

但不會在一下情況中出錯：

1. 定義組件的時候，template中包含自定義的組件
2. 單文件組件，也就是說引用vue文件來注冊一個組件的時候(這個東西會在后面講)。

3. 代碼效果：很明顯的，我們的值成功傳給子組件了。
   

   
   

   子組件向父組件傳輸數(shù)據(jù)

   • 我們可以在子組件中使用emit來觸發(fā)事件，然后在使用這個組件的時候綁定這個事件就可以監(jiān)聽到這個事件的發(fā)生（這時候調(diào)用的函數(shù)是父組件的處理函數(shù)），從而使得父組件接受到子組件傳遞的消息了。
     要給父組件傳遞數(shù)據(jù)主要有兩個步驟
   1. 在定義組件時，定義一個包含觸發(fā)事件的元素，這個事件觸發(fā)時將會調(diào)用emit來觸發(fā)事件【例如可以在按鈕上定義一個onclick事件，這個onclick事件觸發(fā)時將會調(diào)用emit】
   2. $emit()可以有多個參數(shù)，第一個參數(shù)是觸發(fā)的事件的名稱，后面的參數(shù)都是隨著這個事件向外拋出的參數(shù)。
   3. 使用組件時，對組件進(jìn)行事件監(jiān)聽，監(jiān)聽的事件與組件內(nèi)拋出的事件一致
   4. 定義處理目標(biāo)事件的函數(shù)，函數(shù)的參數(shù)是隨事件向外拋出的多個參數(shù)。

   
   

   演示代碼如下：

   【小tips:上面有多重字符串的使用，普通的雙引號和單引號已經(jīng)不足以嵌套使用了，在外層可以使用反引號` ` `【esc下面那個鍵】來包裹，它也可以達(dá)到字符串包裹的效果，特別的是它支持多行字符串?！?/p>

   
   

   非父子組件之間的傳值

   祖孫組件傳數(shù)據(jù)、兄弟組件傳數(shù)據(jù)都屬于非父子組件之間的傳值。

   1. 【如果是祖孫組件傳數(shù)據(jù)，可以使用父組件傳給子組件，子組件傳給孫組件。但這是一個費(fèi)事的做法?！?/li>
   2. 一般都會使用vuex，vuex就像一個變量存儲器，我們可以把一些多個組件都需要用到數(shù)據(jù)存儲到vuex的store中。【這個由于內(nèi)容較重要，留到后面再講】
   3. 只有少量組件使用某個數(shù)據(jù)的時候也可以使用bus模式，bus相當(dāng)于給每一個組件都加上“同一個”新的vue實(shí)例，由于bus是實(shí)例之間共享的，當(dāng)數(shù)據(jù)發(fā)生改變時，可以利用這個vue實(shí)例來調(diào)用emit方法來拋出新值，而其他組件監(jiān)聽bus中的事件就可以獲取到新的值，這樣就實(shí)現(xiàn)了非父子組件之間的傳值。

   
   

   使用bus傳輸數(shù)據(jù)的步驟：

   1. 在Vue的原型上定義vue:Vue.prototype.bus = new Vue()
   2. 當(dāng)數(shù)據(jù)發(fā)生變化時，調(diào)用emit：this.bus.$emit(change,當(dāng)前組件的數(shù)據(jù))
   3. 在組件上監(jiān)聽bus的事件：this.bus.$on(change,一個用于賦值的函數(shù))
   4. 在函數(shù)中獲取事件觸發(fā)帶過來的參數(shù)，賦給當(dāng)前組件，從而實(shí)現(xiàn)兩邊數(shù)據(jù)同步。

   下面的代碼是點(diǎn)擊某個組件發(fā)生數(shù)據(jù)變化時，另一個組件的數(shù)據(jù)也發(fā)生變化：

   
   

   單向數(shù)據(jù)流

   • 單向數(shù)據(jù)流：props使得父組件的數(shù)據(jù)能夠傳輸?shù)阶咏M件，而且傳輸?shù)脑磾?shù)據(jù)發(fā)生改變時，子組件也會發(fā)生改變。但如果在子組件中更改prop，這是不行的，會報警告。
   • 每次父級組件發(fā)生更新時，子組件中所有的 prop 都將會刷新為最新的值。如果允許你在子組件中修改父組件傳入的數(shù)據(jù)的話，使用了父組件的這個數(shù)據(jù)的所有子組件的數(shù)據(jù)都會被修改（這樣就降低了組件的復(fù)用效果，導(dǎo)致數(shù)據(jù)流行不確定，難以確定這個數(shù)據(jù)是在哪個組件中修改的，而且是一個相對危險的行為）
   • 你不應(yīng)該在一個子組件內(nèi)部改變 prop。如果你這樣做了，Vue 會在瀏覽器的控制臺中發(fā)出警告?！具@就是單向數(shù)據(jù)流】
   • 如果你確實(shí)需要修改：
     • 那么你應(yīng)該創(chuàng)建一個子組件內(nèi)部的數(shù)據(jù)，這個內(nèi)部數(shù)據(jù)由傳入的prop的數(shù)據(jù)進(jìn)行初始化。（也就是進(jìn)行數(shù)據(jù)拷貝）
     • 又或者你可以使用計(jì)算屬性。

   
   

   ---

   Props屬性

   
   

   命名規(guī)范：

   大小寫問題

   【有個建議，建議寫屬性名的時候都使用kebab-case (短橫線分隔命名) 命名，因?yàn)檫@個的兼容效果最好】
   HTML 中的特性名是大小寫不敏感的，所以瀏覽器會把所有大寫字符解釋為小寫字符。如果你在props中使用了駝峰命名法，那你在定義屬性的時候需要使用kebab-case (短橫線分隔命名) 命名才能正確傳輸數(shù)據(jù)【因?yàn)槎虣M線后面的字符可以識別成大寫，從而能夠匹配到】。

   如果在屬性中也使用駝峰命名法命名屬性的時候會報這樣的錯：Prop "mycontent" is passed to component , but the declared prop name is "myContent". Note that HTML attributes are case-insensitive and camelCased props need to use their kebab-case equivalents when using in-DOM templates. You should probably use "my-content" instead of "myContent"

   同樣的，如果在組件的template屬性中使用駝峰命名法的屬性，那么這個限制就不存在了。

   
   

   參數(shù)校驗(yàn)

   限制props的類型

   有時候需要使用第三方的組件的時候，所以會需要傳輸數(shù)據(jù)給這個組件來渲染。但如何限制傳入的數(shù)據(jù)的類型呢？

   • 可用于限制數(shù)據(jù)類型的類型：
     • String：字符串
     • Number：數(shù)字
     • Boolean：布爾值
     • Array：數(shù)組
     • Object：對象
     • Date：日期
     • Function
     • Symbol

   
   

   格式：

   props: {
   // 數(shù)據(jù)名:數(shù)據(jù)類型
     title: String,
     likes: Number,
     ...
   }

   
   

   如果傳入的類型不對，那么會報Invalid prop: type check failed for prop "xxx". Expected String with value "xxx", got Number with value xxx.的錯誤。

   
   

   如果允許多種值，可以定義一個數(shù)組：

   props: {
     content: [String,Number]
   }

   
   

   設(shè)置默認(rèn)值

   我們也可以給props中的數(shù)據(jù)設(shè)置默認(rèn)值，如果使用default設(shè)置值，那么沒有傳某個數(shù)據(jù)時默認(rèn)使用這個數(shù)據(jù)。

   props: {
     content: {
     type:[String,Number],
     default:'我的默認(rèn)值'
     }
   }

   如果使用default給數(shù)組或?qū)ο箢愋偷臄?shù)據(jù)賦默認(rèn)值，那么要定義成一個函數(shù)。
   

   
   

   要求數(shù)據(jù)必傳

   如果要求某個數(shù)據(jù)必須傳給子組件，那么可以為它設(shè)置required。
   格式：

   props: {
       content: {
          type: String,
          required: true
      }
   }

   如果沒傳，會報Missing required prop: "xxx"的錯。

   
   

   自定義驗(yàn)證函數(shù)：

   如果想要更精確的校驗(yàn)，可以使用validator,里面是一個函數(shù)，函數(shù)的第一個參數(shù)就是傳入的值，當(dāng)函數(shù)內(nèi)返回true時，這個值才會校驗(yàn)通過。
   以下的代碼是要求傳入的字符串長度大于6位的校驗(yàn)：

           Vue.component('child', {
             props: {
               content: {
                   type: String,
                   validator: function(value) {
                       return (value.length > 6)
                   }
               }
             }

   如果驗(yàn)證不通過，會報Invalid prop: custom validator check failed for prop "xxx"的錯。

   
   

   
   

   傳遞靜態(tài)或動態(tài)Prop

   • 傳遞靜態(tài)或動態(tài)的prop意思就是傳遞的是一個常量還是變量。
   • 傳遞常量的時候：
     • 如果是字符串，可以不使用v-bind。
     • 如果是數(shù)字，布爾值，數(shù)組，對象，那么需要使用vue的v-bind來設(shè)置屬性，因?yàn)槭褂闷胀ǖ膶傩栽O(shè)置會被認(rèn)為是字符串，使用v-bind的時候會被認(rèn)為是js表達(dá)式（從而成功識別成正確的類型）。
   • 傳遞變量的時候都要使用v-bind，不然無法識別成一個變量。

   
   

   補(bǔ)充：

   • 沒有講的內(nèi)容：非 Prop 的特性

   
   

   ---

   給組件綁定原生的事件

   
   

   用下面的代碼來說一個問題：

   
   

   上面的代碼你會發(fā)現(xiàn)點(diǎn)擊了按鈕卻沒有調(diào)用函數(shù)。
   而下面的按鈕按了會打出child。

   
   

   • 在上面我們提過了父子數(shù)據(jù)傳遞，我們知道了父組件的數(shù)據(jù)需要props來傳遞給子組件，說明了父組件的數(shù)據(jù)是不跟子組件共享的。
   • 而事件也是這樣的，在我們使用組件的時候，并不能直接監(jiān)聽一些事件的發(fā)生?！纠缟厦娴淖咏M件傳數(shù)據(jù)給父組件也需要使用emit。】
   • 對于父組件來說，這個組件是子組件下的按鈕，所以直接點(diǎn)擊這個按鈕并不會觸發(fā)事件【或者說你可以認(rèn)為點(diǎn)擊了事件了，但是沒有emit出來，所以父組件監(jiān)聽不到】。
   • 而如果希望點(diǎn)擊按鈕的時候能夠觸發(fā)出按鈕的原生事件（不把它當(dāng)作子組件下的按鈕），那么需要把它綁定成原生事件。我們可以使用.native來修飾事件來說明監(jiān)聽的是一個原生事件。

   
   

   下面的代碼是使用了emit來達(dá)到同樣效果的代碼：

   
   

   ---

   template

   • template是vue中的一個元素。它是一個不會渲染到頁面的元素，通常地它有如下幾個用處：
     • 由于不會被渲染處理，可以在template上使用使用v-if，把一個