介紹

對vue組件的介紹網上有很多大家可以自行查詢

組件 (Component) 是 Vue.js 最強大的功能之一
組件可以擴展 HTML 元素，封裝可重用的代

組件注冊

全局注冊

Vue.component(‘組件名稱’, { }) 第1個參數是標簽名稱，第2個參數是一個選項對象
全局組件注冊后，任何vue實例都可以用
用法：

注意事項：

• 組件參數的data值必須是函數同時這個函數要求返回一個對象
• 組件模板必須是單個根元素
• 組件模板的內容可以是模板字符串

局部注冊

只能在當前注冊它的vue實例中使用

Vue組件之間傳值

父組件向子組件傳值

• 父組件發送的形式是以屬性的形式綁定值到子組件身上。
• 然后子組件用屬性props接收
• 在props中使用駝峰形式，模板中需要使用短橫線的形式字符串形式的模板中沒有這個限制

子組件向父組件傳值

子組件用$emit()觸發事件
$emit() 第一個參數為 自定義的事件名稱 第二個參數為需要傳遞的數據
父組件用v-on 監聽子組件的事件

兄弟之間的傳遞

兄弟之間傳遞數據需要借助于事件中心，通過事件中心傳遞數據
提供事件中心 var hub = new Vue()
傳遞數據方，通過一個事件觸發hub.$emit(方法名，傳遞的數據)接收數據方，通過mounted()鉤子中觸發hub.$on()方法名
銷毀事件 通過hub.$off()方法名銷毀之后無法進行傳遞數據


上面為大家介紹的也僅僅是常用的傳參方式，但vue中的組建通訊方式遠不止這幾種，小編再公眾號中寫過一篇全面的vue通訊，有興趣的可以看一下，在文章最后有公眾號的鏈接！

插槽

介紹

組件的最大特性就是復用性，而用好插槽能大大提高組件的可復用能力

匿名插槽

具名插槽

具有名字的插槽
使用 中的 “name” 屬性綁定元素

作用域插槽

父組件對子組件加工處理
既可以復用子組件的slot，又可以使slot內容不一致

寫在最后

?$原創不易，還希望各位大佬支持一下$

👍 $點贊，你的認可是我創作的動力！$

?? $收藏，你的青睞是我努力的方向！$

?? $評論，你的意見是我進步的財富！$