一文淺析Vue元件的自訂事件和全域事件匯流排

這篇文章帶大家了解Vue元件，介紹一下Vue元件的自訂事件和全域事件匯流排，希望對大家有幫助！

一，自訂事件

#1.自訂事件是什麼

#自訂事件一種元件間通訊的方式，適用於子元件－> 父元件傳輸資料等

2.要在什麼地方使用

#若App是父元件，School是子元件，School想給App傳數據，那麼就要在App中給School綁定自訂事件(事件的回調在App)，也就是父元件必須事先綁定一個自己定義的事件，供給子組件使用，這樣才能完成父子間的數據溝通

就好比小a的父親在外地打工，然後小a想他的爸爸了，然後呢他爸爸提前給了小a一個電話，對小a說，想我了就打這個電話，然後小a打完電話就能和他爸爸進行交流了，打電話就是進行了父組件的自定義事件的回調，所以資料就可以傳給父元件

3.綁定自訂事件

3.1第一種方式，在父元件中: b8e8fd49a03356013c03e37ee5f7dfdf 或fcb8165be59bbaf148785e6313549ebd

3.2第二種方式，在父組件:e1d445036f7d80b7d2547f492d0a7142mounted(){this . $refs. xxx. $on('shanyu' ,this. test)}

#如果在自訂事件裡寫一個原生的事件的話，那麼也會預設為自訂事件，所以我們用@xxx.native來解決這種問題  【相關推薦： vuejs影片教學、web前端開發】

首先在父元件內寫一個自訂元件（若想讓自訂事件只能觸發一次,可以使用once修飾符，或$once方法）

      // 在父组件内自定义个事件
    getMyStudent(name) {
      console.log("App收到学校名:", name);
      this.studentName = name;
    }
  },
  mounted() {
    this.$refs.student.$on("shanyu", this.getMyStudent);
  }

再找到子元件觸發Student元件實例身上的shanyu事件

觸發自訂事件:this. $emit( ' shanyu'，資料)

    methods: {
        sendStudentName(){
            //触发Student组件实例身上的shanyu事件
            this.$emit('shanyu',this.name)
        }
    }

4.解綁自訂事件

    unbind(){
        this.$off('shanyu')// 只适用于解绑1个事件
        this.$off(['shanyu','demo'])// 适用于解绑多个
        this.$off()// 适用于解绑全部
    }

注意:透過this. $refs . xxx. $on( 'shanyu'，回呼)綁定自訂事件時，回呼要麼配置在methods中，要麼用箭頭函數，否則this指向會出問題，從而引起vue報錯

#二，全域事件匯流排

1.什麼是全域事件匯流排

一種元件間通訊的方式，適用於任意組件間通信。和自訂事件一樣但又遠超過自訂事件，它可以實作兄弟間通訊

#2.如何使用

這裡主要牽涉到三個文件main.js和倆兄弟元件，首先找到main.js就是有vm的那個文件，然後再vue實例裡面安裝全域事件匯流排，那為啥要放在beforCreate這個鉤子裡面呢？因為beforCreate這個宣告週期鉤子的特點就是在資料為刷新之前執行$bus就是目前應用的vm，bus不只有公車的意思還有總線的意思

new Vue({
  el: "#app",
  render: h => h(App),
  // 使用beforCreate这生命周期钩子来进行兄弟间的通信
  beforeCreate() {
    Vue.prototype.$bus = this // 安装全局事件总线
  }
})

3.使用事件匯流排

1.接收資料

#A元件想接收數據，則在A元件中給$bus綁定自訂事件，事件的回調留在A組件本身。 methods(){mounted() {this . $bus . $on( 'xxxx' ,this . demo)}

3f1c4e4b6b16bbbd69b2ee476dc4f83a
export default {
  name: "School",
  data() {
    return {
      name: "山鱼特效屋",
      address: "南京北城区"
    };
  },
  mounted() {
    this.$bus.$on('shanyu', (data) => {
      console.log("我是School组件，我收到了数据", data);
    });
  },
  //使用完之后销毁该绑定事件避免后期错误使用
  beforeDestroy() {
    this.$bus.$off("hello")
  },
}
2cacc6d41bbb37262a98f745aa00fbf0

2.提供資料

#this. $bus.$emit( 'xxxx',傳輸資料)

d477f9ce7bf77f53fbcf36bec1b69b7a
  1b036e027ab888e5acdaae6ac491e863
    c1a436a314ed609750bd7c7d319db4da学生姓名：{{name}}2e9b454fa8428549ca2e64dfac4625cd
    c1a436a314ed609750bd7c7d319db4da学生性别：{{sex}}2e9b454fa8428549ca2e64dfac4625cd
    5c8a0c1f170e64ce29befb688e7617d4点击将数据给兄弟School65281c5ac262bf6d81768915a4a77ac0
  16b28748ea4df4d9c2150843fecfba68
21c97d3a051048b8e55e3c8f199a54b2

3f1c4e4b6b16bbbd69b2ee476dc4f83a
export default {
  name: "Student",
  data() {
    return {
      name: "张三",
      sex: "男"
    };
  },
  // 配置一个methods项
  methods: {
      snedStudentName(){
      // 选择给谁提供数据
          this.$bus.$emit('shanyu',this.name)
      }
  },
}
2cacc6d41bbb37262a98f745aa00fbf0

註：最好在beforeDestroy鉤子中,用$off去解綁目前元件所用到的事件。

（學習影片分享：vuejs入門教學、程式設計基礎影片）

以上是一文淺析Vue元件的自訂事件和全域事件匯流排的詳細內容。更多資訊請關注PHP中文網其他相關文章！