<dd id="3pk9i"><optgroup id="3pk9i"><video id="3pk9i"></video></optgroup></dd>
<rp id="3pk9i"></rp>

<dd id="3pk9i"><track id="3pk9i"></track></dd>
      1. <th id="3pk9i"></th>
        1. <ol id="3pk9i"><ruby id="3pk9i"></ruby></ol>

        2. vue事件總線廢除了嗎-全球觀點

          來源:php中文網 | 2022-12-28 18:46:27 |

          本教程操作環境:windows7系統、vue3版,DELL G3電腦。

          vue3取消了全局事件總線,原因是安全性低。


          (相關資料圖)

          vue的全局事件總線

          全局事件總線,是一個全局任意組件通信技術。

          顧名思義,任意組件間通信,均可實現。

          它通信是通過一個傀儡去實現的,一個所有組件均可訪問到的傀儡,vue中命名叫 $bus

          在vue2中

          我們可以直接在 入口文件 mian.js 中使用生命周期鉤子 beforecreated直接創建 $bus

          beforeCreate() {Vue.prototype.$bus = this}

          記得把鉤子寫在 掛載之前即可。

          使用時:

          在需要接收數據的組件中使用 mounted鉤子綁定事件監聽

          mounted() {  this.$bus.$on("hello",(data) => {    console.log(data);  })},

          在需要發送數據的組件中需要發送的操作中觸發該方法即可

          methods: {  sendStudentName(){    this.$bus.$emit("hello",this.name)  }},

          還沒完,如果組件銷毀,記得解綁事件,在哪綁定就在哪解綁,使用beforeDestroy鉤子

          beforeDestroy() {  this.$bus.$off("hello")},

          在vue3

          在vue3中,取消了全局事件總線,如果想要使用,我們需要引入第三方庫 mitttiny-emitter

          1、安裝mitt庫

          npm i mitt -s

          2、在根目錄封裝一個 js 文件,以便組件中導入使用

          文件起名最好見名知義 例如 eventBus.js

          內容:

          //導入import mitt from "mitt"; //定義,定義也最好見名知義const emitter = mitt(); //暴露export default emitter;

          3、使用

          1)相互通信的組件均需要導入js

          import emitter from "../../eventBus"

          2) 接收數據的組件 在setup()中綁定事件監聽

          setup(){  emitter.on("event",(info) => {    ...  })  return{}}

          這里的箭頭函數,換成普通函數也可

          3)發送數據的組件觸發即可傳遞數據

          setup(){function send(info) {emitter.emit("event",info))return{}}

          4)組件銷毀前,解綁事件,

          onBeforeUnmount(()=>{emitter.off("event", onEvent);})

          如果使用普通函數,則把該函數也在第二個參數的位置,如果是箭頭函數,則不用寫。如上 onEvent

          以上就是vue事件總線廢除了嗎的詳細內容,更多請關注php中文網其它相關文章!

          關鍵詞: 事件總線 vue3

          中文字幕在线观看2021
          <dd id="3pk9i"><optgroup id="3pk9i"><video id="3pk9i"></video></optgroup></dd>
          <rp id="3pk9i"></rp>

          <dd id="3pk9i"><track id="3pk9i"></track></dd>
            1. <th id="3pk9i"></th>
              1. <ol id="3pk9i"><ruby id="3pk9i"></ruby></ol>