元件通訊:父子之間的通訊方式
阿新 • • 發佈:2022-05-17
沒啥,就是寫個基礎的總結。就當我部落格文是打怪的新手村吧……
一、父子通訊:props接收
父元件賦值,
子元件插值引用,props接收
props是隻讀的,如果進行了修改會發出警告。如果需要進行操作資料修改,可以在data處複製一份資料來進行接收修改:
二:父子通訊:傳遞函式型別的props實現
父 app元件
子 student 元件,props接收值後,觸發事件傳值過去
三:父子通訊:自定義事件通訊
父 app元件 此處可以換成v-on:chest="SchoolTest",一樣的作用,一個簡寫而已
子 school元件:使用this.$emit('事件',資料)觸發自定義事件
或使用$refs 結合$on寫法。這種寫法比較靈活
- $on([‘event1’, ‘event2’], cb) // 監聽多個事件
- $off([‘event1’, ‘event2’], cb) // 移除多個事件
- $off() // 移除事件不傳引數
- $off(‘event1’) // 移除事件傳一個引數
- $off(‘event1’, cb) // 移除事件傳兩個引數
- $emit(‘event1’, param1, param2) // 觸發事件傳引數