1. 程式人生 > 其它 >元件通訊:父子之間的通訊方式

元件通訊:父子之間的通訊方式

 沒啥,就是寫個基礎的總結。就當我部落格文是打怪的新手村吧……

一、父子通訊: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) // 觸發事件傳引數