Vue3 里 provide 一个 Vue 实例,为什么在 inject 时必须填写默认值?

2020-08-22 19:42:28 +08:00
 Shook

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 就不需要了,可以直接拿到并使用。

2415 次点击
所在节点    Vue.js
0 条回复

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/700561

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX