问题
我是看网上大部分说的Vue2.x的 Vue.prototype 应该换成以下写法
import toast from './scripts/toast';
import { createApp } from 'vue'
import App from './App.vue'
export default {
version: '1.0.0',
author: 'lzh',
install: function (Vue) {
const app = createApp(App);
app.config.globalProperties.$toast = toast;
}
}
import { getCurrentInstance, onMounted } from "vue";
export default {
setup( ) {
const { ctx } = getCurrentInstance(); //获取上下文实例
onMounted(() => {
console.log(ctx, "ctx");
ctx.$toast('测试');
});
},
};
但是结果并不能使用
报错信息
$toast is undefined
于是我想起了Vue.use默认执行插件的install方法并传入Vue当前实例
所以我打印了一下Vue
打印结果
发现了端倪
然后将代码改成这样就可以啦
import toast from './scripts/toast';
export default {
version: '1.0.0',
author: 'lzh',
install: function (Vue) {
// toast Fn
Vue.config.globalProperties.$Toast = toast;
}
}
注意：使用getCurrentInstance()时候要注意尽量别使用里边的ctx属性 打包后容易出错，尤大大推荐使用内部的 proxy
const { proxy } = getCurrentInstance();
proxy.$toast('测试成功');
