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 就不需要了,可以直接拿到并使用。
这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。
V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。
V2EX is a community of developers, designers and creative people.