?一、自定義組件：

自定義組件有兩種形式，一種是全局的自定義組件，另一種是寫在Vue里面的受掛載容器限制使用的。

1.全局自定義組件：Vue.component(id,?[definition])

組件中也包含生命周期，幾乎Vue中有的組件里也都有。但是注意，在組件中定義的這些屬性、數(shù)據(jù)、方法等只會在組件里生效。

并且組件中的data是一個方法，不同于在Vue中的data是一個對象。在組建中data返回一個對象。在返回的對象中定義數(shù)據(jù)。

2.Vue的自定義組件：components:{id:{}}

自定義組件中的props選項，用于定義組件的屬性，有兩種方式，上圖是定義數(shù)組，下圖是定義對象。

還有需要注意的是，props中定義的屬性都是 只讀 的，不能修改。如果有需要，我們一般會在組件的data中設置一個數(shù)據(jù)當做中轉對象，這個對象的值時可以修改的。

我們設置好中轉對象了以后，用它來替代原本props里設置的屬性。（ 也就是用myCount 替代了 count? ）這樣顯示出來的數(shù)據(jù)就可以被修改了。

3。學到了一個方法：通過在組件中觸發(fā)一個事件，然后用定義的方法來修改Vue中data里的數(shù)據(jù)：

這里是寫在組件中的，用監(jiān)聽器監(jiān)聽myCount的動態(tài)。一旦數(shù)值發(fā)生變化就觸發(fā)一個自定義事件。

this.$emit('事件名稱'，事件對象 )

然后再Vue中寫一個方法，這個方法傳入下標和當前事件對象。

通過下標找到對應的count，把count的值重新定義為 e 也就是當前事件對象。

@synccount='synccount(index,$event)'

@synccount='synccount(index,$event)'? 給自定義事件synccount 綁定了 synccount 方法（名字可以隨便取，這里同名了）。并且傳入index和當前事件對象。這個$event 傳進synccount方法中就是e（e寫在html里面就是 $event）。

結合上面3張圖片來看，這個事件對象e就是自定義事件synccount中傳出的那個‘val’。觸發(fā)這個自定義事件的時候，這個‘val’就作為事件對象傳出去給了事件綁定的這個叫synccount的方法。成為了這個方法的事件對象。

這個‘val’就是myCount的最新值。

要是還看不懂的話就去看代碼吧。

二、組件中的插槽：

想在組件標簽中間加東西?并且希望加入的東西在組件中顯示?就需要用到插槽<slot></slot>

組件標簽中寫的任何內容都會在插槽里顯示?插槽在哪里?內容就在哪顯示

這里把插槽 <slot></slot> 寫在了最上面

效果圖：