準(zhǔn)備：
使用vue-cli新建一個(gè)webpack項(xiàng)目
注冊(cè)組件：
打開創(chuàng)建的項(xiàng)目胧后，在component文件夾中新建一個(gè)Loading文件夾上鞠，在Loading文件夾下新建兩個(gè)文件豹悬，Loading.vue和index.js.
其中Loading.vue為子組件模板玄括，index.js文件是用來把子組件模塊導(dǎo)出卒茬。
Loading.vue只是簡單顯示一下Loading文字岔乔，如下：
接下來需要將組件注冊(cè)并導(dǎo)出酥筝，index.js代碼如下：
上面代碼第一行是導(dǎo)入組件Loading
3-7行就是注冊(cè)組件，需要注意的是Vue.component方法的第一個(gè)參數(shù)是組件使用時(shí)的名字雏门，比如我上面定義的是fire-loading,那么在使用的時(shí)候就用<fire-loading><fire-loading/>嘿歌，第二個(gè)參數(shù)就是所要注冊(cè)的組件。
最后一行則是將內(nèi)容導(dǎo)出
最后一步在main.js文件中引入
現(xiàn)在你可以在任何想用這個(gè)組件的地方插入了 組件相應(yīng)的樣式和js代碼可以直接寫在第一步中的文件之中茁影！
比如我們?cè)陧?xiàng)目自動(dòng)生成的Hello.vue中使用宙帝，
顯示效果如下：
現(xiàn)在就已經(jīng)成功加載上我們自定義的組件了。
父組件傳值給子組件
首先在子組件loading.vue中聲明props,然后就可以像vue data中的數(shù)據(jù)一樣使用兩個(gè)大括號(hào)來使用它
接下來在父組件中引用子組件的地方添加在上面props中聲明的屬性呼胚，屬性名需要保持一致
則會(huì)看到如下效果：
如果需要?jiǎng)討B(tài)綁定到父組件的數(shù)據(jù) 只需要使用v-bind ,簡寫使用冒號(hào):?
效果也是一樣的
子組件給父組件傳遞數(shù)據(jù)
父組件可以使用 props 給子組件傳遞數(shù)據(jù)茄唐，那么反過來呢？該自定義事件出場了蝇更！
使用 v-on 綁定自定義事件
每個(gè) Vue 實(shí)例都實(shí)現(xiàn)了事件接口 Events interface沪编，即：
使用 $on(eventName) 監(jiān)聽事件
使用 $emit(eventName) 觸發(fā)事件
另外，父組件可以在使用子組件的地方直接用 v-on 來監(jiān)聽子組件觸發(fā)的事件年扩。
下面我們寫個(gè)例子
首先我們?cè)谧咏M件中添加一個(gè)button蚁廓，定義一個(gè)v-on:click事件，在事件的處理函數(shù)中將該事件分發(fā)給父組件
然后在父組件中插入子組件的地方使用v-on:(子組件分發(fā)的事件名稱)來獲取子組件傳遞的數(shù)據(jù)
如上圖所示厨幻，我們將傳遞的數(shù)據(jù)以彈出框的形式顯示出來相嵌，效果如下
現(xiàn)在我們就成功獲取到子組件傳遞給父組件的數(shù)據(jù)了。
slot的用法
單個(gè) Slot
除非子組件模板中况脆，包含至少一個(gè)插口饭宾，否則父組件的內(nèi)容將會(huì)被丟棄。當(dāng)子組件模板中只有一個(gè)沒有屬性的 slot 時(shí)格了，父組件的內(nèi)容片段將會(huì)整個(gè)插入到子組件中 slot 所在的 DOM 位置看铆，并替換掉 slot 標(biāo)簽本身。
最初在標(biāo)簽中的任何內(nèi)容盛末，都被視為備用內(nèi)容弹惦。備用內(nèi)容在子組件作用域內(nèi)編譯，并且只有在宿主元素為空悄但，且沒有要插入的內(nèi)容時(shí)才顯示備用內(nèi)容棠隐。
下面我們來個(gè)例子
在子組件原有代碼的基礎(chǔ)上在button的下面添加一對(duì)slot標(biāo)簽
在父組件中的子組件使用的地方插入一對(duì)p標(biāo)簽
那么就會(huì)顯示如下效果
如果我把slot標(biāo)簽移動(dòng)到button標(biāo)簽的上面
那么大家就應(yīng)該能猜到會(huì)有什么效果了吧
所以slot又會(huì)被叫做插槽
具名 Slot
元素有一個(gè)特殊的name屬性，可以用于深度定制如何分發(fā)內(nèi)容檐嚣≈螅可以給多個(gè) slot 分配不同的名字。一個(gè)具有名稱的 slot，會(huì)匹配內(nèi)容片段中有對(duì)應(yīng)slot屬性的元素报咳。
我們?cè)賮碜鰝€(gè)例子侠讯，我們?cè)谧咏M件模板中定義兩個(gè)插槽slot，一個(gè)位于頂部暑刃，一個(gè)位于底部
在父組件定義兩個(gè)p標(biāo)簽
顯示如下效果
今天就寫這么多了厢漩，后續(xù)還會(huì)堅(jiān)持，持續(xù)更新補(bǔ)充
