请教老师message组件回调问题

来源：8-7 Message 组件改进为函数调用形式

刘小易

2021-01-02

试过好多次，不知道类似（包括）message组件，或者说是插件，怎么实现回调钩子？现在插件开发跟Vue2差别太大了，不能在实例上添加回调函数了。
// demo
message('text', {
    timeout: 2000,
    closed: function() {
        // code...
    }
})

写回答

1回答

张轩

2021-01-03

同学你好可以将 closed 作为属性传入到 Message 组件中，即可实现，代码如下

// Message.vue
onClose: {
    type: Function
}

const hide = () => {
    isVisible.value = false
    if (props.onClose) {
        props.onClose(true)
    }
    context.emit('close-message', true)
}

// createMessage 多加一个参数传入
const createMessage = (message: string, type: MessageType, onClose?: () => void, timeout = 2000) => {
    const messageInstance = createApp(Message, {
        message,
        type,
        onClose
    })
// 调用的时候传入 onClose
createMessage('123', 'error', () => { alert(1) }, 8000)
点击 close 的时候，alert 被调用了

借鉴了 element-plus 的做法

Vue3 + TS 仿知乎专栏企业级项目

带你完成前后端分离复杂项目，率先掌握 vue3 造轮子技能

3142 学习 · 2313 问题

查看课程

相似问题

老师请问怎样在 setup 的方法内，动态加载组件

回答 2

context.emit('close-message', true)

回答 1

组件创建完成以后是否可以手动修改props

回答 1

直接修改vnode的props的无法影响组件重新渲染？

回答 1

createApp 修改props

回答 1

打开慕课网App查看更多内容