一、父傳子
1、創建子組件,在src/components/文件夾下新建一個Child.vue,
2、.Child.vue的中創建props,然后創建一個名為message的屬性,
3、.在App.vue中注冊Child組件,並在template中加入child標簽,標簽中添加message屬性並賦值,
父組件向子組件傳值成功
總結一下:
1子組件在props中創建一個屬性,用以接收父組件傳過來的值()
2父組件中注冊子組件
3在子組件標簽中添加子組件props中創建的屬性4把需要傳給子組件的值賦給該屬性
1 值肯定是定義在父組件中的,供所有子組件共享。所以要在父組件的data中定義值
2 父組件要和子組件有契合點:就是在父組件中調用、注冊、引用子組件
3 父組件和子組件鏈接的地方(即引用子組件的標簽上),把父組件的值綁定給子組件
4子組件內部肯定要去接受父組件傳過來的值:props(小道具)來接收
5子組件內部就可以直接使用父組件的值
二、子傳父
1、在子組件中創建一個按鈕,給按鈕綁定一個點擊事件,
2、在響應該點擊事件的函數中使用$emit來觸發一個自定義事件,並傳遞一個參數
3、在父組件中的子標簽中監聽該自定義事件並添加一個響應該事件的處理方法
子組件向父組件傳值成功
總結一下:
- 子組件中需要以某種方式例如點擊事件的方法來觸發一個自定義事件
- 將需要傳的值作為$emit的第二個參數,該值將作為實參傳給響應自定義事件的方法
- 在父組件中注冊子組件並在子組件標簽上綁定對自定義事件的監聽
-
在通信中,無論是子組件向父組件傳值還是父組件向子組件傳值,他們都有一個共同點就是有中間介質,子向父的介質是自定義事件,父向子的介質是props中的屬性。抓准這兩點對於父子通信就好理解了