Vue自定义插件中调用vuetify-dialog的$dialog未识别该如何解决？

问题根因 #

1. 你定义handler时使用了箭头函数，箭头函数的this在声明时就绑定了外层的插件函数作用域，无法指向调用$callback.handler()的Vue组件实例，所以拿不到挂载在实例原型上的$dialog
2. 你传入的options参数没有在插件代码中做处理，即便传了context也不会生效
3. 如果注册顺序错误，vuetify-dialog晚于你的自定义插件注册，也会导致$dialog未挂载

解决方案1：修正this指向（无需额外传context） #

修改你的自定义插件代码如下：

export default function(Vue, options = {}) {
    Object.defineProperties(Vue.prototype, {
        $callback: {
            // 改用普通函数，这里的this指向当前调用$callback的Vue组件实例
            get() {
                return {
                    // handler用箭头函数继承get函数的this，也就是组件实例
                    handler: () => {
                        this.$dialog.notify.success(
                            "Text here",
                            {
                                position: "top-right",
                                timeout: 5000
                            }
                        );
                    }
                }
            }
        }
    });
}

调整app.js的注册顺序，确保先注册vuetify-dialog，再注册你的自定义插件：

import VuetifyDialog from 'vuetify-dialog'
// 先注册vuetify-dialog，完成$dialog的全局挂载
Vue.use(VuetifyDialog, { 
  // 你原来的vuetify-dialog配置项
})

import Callback from "./apis/Callback";
// 再注册自定义插件
Vue.use(Callback);

解决方案2：保留context传参的适配方案 #

如果你确实需要通过options传入dialog实例，修改插件代码如下：

export default function(Vue, options = {}) {
    // 取出传入的context配置，兜底取原型上已有的$dialog
    const { context = {} } = options;
    const dialogInstance = context.VuetifyDialog || Vue.prototype.$dialog;

    Object.defineProperties(Vue.prototype, {
        $callback: {
            get() {
                return {
                    handler: () => {
                        dialogInstance.notify.success(
                            "Text here",
                            {
                                position: "top-right",
                                timeout: 5000
                            }
                        );
                    }
                }
            }
        }
    });
}

app.js的注册代码不用改，保持你原来的写法即可，同样要注意vuetify-dialog的注册顺序早于自定义插件。

内容的提问来源于stack exchange，提问作者Cheddadi Yassine