Vue組件的自定義事件和全局事件總線怎么使用

這篇“Vue組件的自定義事件和全局事件總線怎么使用”文章的知識點大部分人都不太理解，所以小編給大家總結了以下內容，內容詳細，步驟清晰，具有一定的借鑒價值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來看看這篇“Vue組件的自定義事件和全局事件總線怎么使用”文章吧。

一，自定義事件

1.自定義事件是什么

自定義事件一種組件間通信的方式，適用于 子組件 ——> 父組件傳輸數據等

2.要在什么地方使用

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

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

3.綁定自定義事件

3.1第一種方式，在父組件中: <Demo @shanyu="test"/> 或<Demo v-on: shanyu="test"/>

3.2第二種方式，在父組件中:<Demo ref="demo"/>mounted(){this . $refs. xxx. $on('shanyu' ,this. test)}

如果在一個自定義事件里寫一個原生的事件的話，那么也會默認為自定義事件，所以我們用@xxx.native來解決這種問題 。

首先在父組件內寫一個自定義組件（若想讓自定義事件只能觸發一次,可以使用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)}

<script>
export default {
  name: "School",
  data() {
    return {
      name: "山魚特效屋",
      address: "南京北城區"
    };
  },
  mounted() {
    this.$bus.$on('shanyu', (data) => {
      console.log("我是School組件，我收到了數據", data);
    });
  },
  //使用完之后銷毀該綁定事件避免后期錯誤使用
  beforeDestroy() {
    this.$bus.$off("hello")
  },
}
</script>

2.提供數據

this.$bus.$emit( 'xxxx',傳輸數據)

<template>
  <div class="demo">
    <h3>學生姓名：{{name}}</h3>
    <h3>學生性別：{{sex}}</h3>
    <button @click="snedStudentName">點擊將數據給兄弟School</button>
  </div>
</template>

<script>
export default {
  name: "Student",
  data() {
    return {
      name: "張三",
      sex: "男"
    };
  },
  // 配置一個methods項
  methods: {
      snedStudentName(){
      // 選擇給誰提供數據
          this.$bus.$emit('shanyu',this.name)
      }
  },
}
</script>

注：最好在beforeDestroy鉤子中,用$off去解綁當前組件所用到的事件。

以上就是關于“Vue組件的自定義事件和全局事件總線怎么使用”這篇文章的內容，相信大家都有了一定的了解，希望小編分享的內容對大家有幫助，若想了解更多相關的知識內容，請關注億速云行業資訊頻道。