跳至主要內容

Vue3组件通信

Guitar大约 2 分钟

Vue3 自定义事件

Vue3 中自定义事件的绑定和Vue2一样，但触发不同了。Vue3 中组件实例的 this 不再当前是 vc 对象，没有 $emit 这样的API了。

// 触发事件，需要在 setup 中接收 context对象

// context代表组件上下文对象，是setup当中的第二个参数。
setup(props, context){
    // methods
    function triggerEvent1(){
        // 通过context触发事件event1，传递数据。
        context.emit('event1', '张三', 50)
    }
    // 返回一个对象
    return {triggerEvent1}
}

Vue3 全局事件总线

在 Vue2 中，通过将 vm 绑定到 Vue 原型对象上，作为全局事件总线。而 Vue3 中不再有vc的概念，故Vue2的方式不再支持。

Vue3 中实现全局事件总线，需要借助三方库：mitt。

  1. 安装 mitt

    npm i mitt

  2. 创建并编写 utils/event-bus.js

    import mitt from 'mitt'

export default mitt() // 执行一次 mitt()获得一个 emitter
// 通过 emitter 绑定和触发全局事件，作为全局事件总线

  3. 引入 emitter，绑定事件

    // 导入全局事件总线对象
import emitter from './utils/event-bus.js'

setup(){
    // 生命周期钩子：mounted，完成事件的绑定
    onMounted(() => {
        // 给全局事件总线绑定事件
        emitter.on('event1', showInfo)
    })

    // methods
    function showInfo(user){
        alert(`${user.name}，${user.age}`)
    }

    // 返回一个对象
    return {showInfo}
}

  4. 引入 emitter，触发事件

    // 导入全局事件总线对象
import emitter from './utils/event-bus.js'

setup(){
    // methods
    function triggerEvent1(){
        // 触发全局事件总线上的事件event1
        emitter.emit('event1', {name:'张三', age:30})
    }
    function clearAllEvent(){
        // 清除总线上绑定的所有事件。
        emitter.all.clear()
    }
    function clearEvent1(){
        // 解绑指定的事件
        emitter.off('event1')
    }

    // 返回一个对象
    return {triggerEvent1, clearAllEvent, clearEvent1}
}

provide、inject

provide、inject 是 Vue3 提供的，专门用于组件共享的组合式API，底层有一个容器管理共享的数据，使用 provide 向容器中加入数据，使用 inject 从容器中取出数据（引用，容器内还有）。

import {provide} from 'vue'

setup(){
    let data = ...;
    // 共享数据
    // provide("name",value)
    provide("myData",data)
    
    return {data}
}

import {inject} from 'vue'

setup(){
    // 取出数据
    // inject("name")
    let data = inject("myData")
    
    return {data}
}

provide 存入的数据 inject 取出的数据是一样的（取出一个引用），如果 provide 存入的数据是响应式的，那么 inject 取出的也是响应式的，并且二者同步（本质就是同一个，引用不同而已）。

Copyright ©2024-present Guitar