confirm.js(多绑定了一个$store 用于测试):
import Vue, { createApp, App, ComponentPublicInstance } from 'vue';
import Confirm from './src/Confirm.vue';
const getInstance = (element?: string | Element): ComponentPublicInstance => {
return createApp(Confirm).mount(element ?? document.body);
};
export default {
install: (app: App): void => {
const element = document.createElement('div');
document.body.appendChild(element);
app.provide('$confirm', getInstance(element));
app.provide('$store', { name: 'App', version: '0.1.0' });
},
default: Confirm
};
在子组件中:
export default defineComponent({
setup () {
const confirm = inject('$confirm', { open: () => void 0 }),
store = inject('$store');
const openConfirm = () => {
confirm.open();
console.log(store);
console.log('clicked button');
};
return {
confirm,
openConfirm
};
},
});
测试中发现 inject $confirm 必须要设定一个带有我需要的属性的默认值才能成功拿到,否则会报错(Object is of type 'unknown')。这个是不是 TS 的限制? 不过 inject $store 就不需要了,可以直接拿到并使用。