一、組件的定義與使用

1、vue文件的組成

（1）模板頁面

（2）js模塊對象

（3）樣式

2、基本使用

（1）引入組件

（2）映射成標簽

（3）使用組件標簽

3、關于標簽名與標簽屬性名書寫問題

（1）寫法一：一模一樣

（2）寫法二：大寫變小寫，并用-連接

4、組件間通信基本原則

（1）不要在子組件中直接修改父組件的狀態數據

（2）數據在哪，更新數據的行為（函數）就應該定義在哪

5、使用組件標簽時

<my-component name='tom' :age='3' :set-name='setName'></my-component>

6、定義MyComponent時

（1）在組件內聲明所有的props

（2）只指定名稱

（3）指定名稱和類型

（4）指定名稱/類型/必要性/默認值

注意：

（1）此方式用于父組件向子組件傳遞數據

（2）所有標簽屬性都會成為組件對象的屬性，模板頁面可以直接引用

（3）問題：

a.如果需要向非子后代傳遞數據必須多層逐層傳遞

b.兄弟組件間也不能直接props通信，必須借助父組件才可以

7、vue自定義事件

（1）綁定事件監聽

方式一：

通過 v-on 綁定

方式二：

通過 &on()

8、觸發事件

?this.&emit(eventName, data)

9、消息訂閱與發布

（1）訂閱消息

PubSub.subscribe('msg', function(msg, data){})

（2）發布消息

PubSub.publish('msg', data)

注意

優點：此方式可實現任意關系組件間通信（數據）

10、事件的 2 個重要操作(總結)

1）綁定事件監聽 (訂閱消息)

目標: 標簽元素 <button>

事件名(類型): click/focus

回調函數: function(event){}

2）觸發事件 (發布消息)

DOM 事件: 用戶在瀏覽器上對應的界面上做對應的操作

自定義: 編碼手動觸發

11、slot

（1）理解

此方式用于父組件向子組件傳遞`標簽數據

（2）子組件: Child.vue

（3）父組件: Parent.vue