vue中兄弟元件之間傳遞資料,子元件調用父元件事件并傳參

使用方法：

vm. e m i t ( " 事 件 名 （ 比 如 c l i c k ， i n p u t 等 事 件 ， 這 個 不 是 函 數 名 ） " , 形 參 ) ： 觸 發 當 前 實 例 上 的 事 件 。 附 加 參 數 都 會 傳 給 監 聽 器 回 調 。 − − − − 發 布 v m . emit( "事件名（比如click，input等事件，這個不是函數名）", 形參 )：觸發目前執行個體上的事件。附加參數都會傳給監聽器回調。 ----釋出 vm. emit("事件名（比如click，input等事件，這個不是函數名）",形參)：觸發目前執行個體上的事件。附加參數都會傳給監聽器回調。−−−−釋出vm.on( “事件名”, callback回調函數避免this問題，使用箭頭函數（）=>{} ) ：監聽目前執行個體上的自定義事件。事件可以由 vm. e m i t 觸 發 。 回 調 函 數 會 接 收 所 有 傳 入 事 件 觸 發 函 數 的 額 外 參 數 。 − − − − − 訂 閱 v m . emit 觸發。回調函數會接收所有傳入事件觸發函數的額外參數。 -----訂閱 vm. emit觸發。回調函數會接收所有傳入事件觸發函數的額外參數。−−−−−訂閱vm.root：目前元件樹的根 Vue 執行個體。

1. 在main入口js中設定一個bus總線

// 建立一個Vue執行個體
new Vue({
  router,
  store,
  render: h => h(App),
  data: {
    // 空的執行個體放到根元件下，所有的子元件都能調用 "Bus總線" 訂閱者釋出者模式
    Bus: new Vue()
  }
}).$mount('#app');

           

2.釋出

//擷取被選中的班級
    handleSelectionChange(vals) {
      this.ids = vals.map((id) => id.classesId);
      this.$root.Bus.$emit("myFun", this.ids);
      console.log(this.ids);
    },
           

3.訂閱

mounted() {
    this.$root.Bus.$on("myFun", (ids) => (this.ids = ids));
  },
           

4.解析：每當 handleSelectionChange()函數執行，都會觸發 e m i t ( " m y F u n " , t h i s . i d s ) ; emit("myFun", this.ids); emit("myFun",this.ids);on(“myFun”, (ids)監聽這個函數，并調用自己中的回調函數。

子元件：

handleCurrentChange(val = 1) { this.$emit("handleCurrentChange", val); },