vue inject 设置默认值

provide/inject

先看官网介绍：

• 类型：

  • provide：Object | () => Object
  • inject：Array<string> | { [key: string]: string | Symbol | Object }

• 详细：

  这对选项需要一起使用，以允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在其上下游关系成立的时间里始终生效。如果你熟悉 React，这与 React 的上下文特性很相似。

  provide 选项应该是一个对象或返回一个对象的函数。该对象包含可注入其子孙的 property。在该对象中你可以使用 ES2015 Symbols 作为 key，但是只在原生支持 Symbol 和 Reflect.ownKeys 的环境下可工作。

  inject 选项应该是：

  • 一个字符串数组，或

  • 一个对象，对象的 key 是本地的绑定名，value 是：

    • 在可用的注入内容中搜索用的 key (字符串或 Symbol)，或

    • 一个对象，该对象的：

      • from property 是在可用的注入内容中搜索用的 key (字符串或 Symbol)
      • default property 是降级情况下使用的 value

在实际使用中，provide/inject 多用于层级较深的数据传输，类似的也可以使用eventbus/vuex等； provide/inject的优点在于只需要在需要时在子孙组件中定义inject接收父组件提供的方法或者函数。但是如果子孙组件对于inject的内容并不是必须条件，也就是说在某些场景下，也作为其他组件的子/孙组件时，父组件并未提供相应的provide，此时虽然程序代码正常运行，但是会抛出“[Vue warn]: Injection "XX" not found”的错误。 错误的原因就是父级组件并未提供对应provide，解决方法，类似props，需要设定默认值：

// inject: ['object1', 'function1', 'number1', 'string1', 'boolean1'],
inject: {
    boolean1: {
        value: 'boolean1',
        default: false,
    },
    boolean1: {
        value: 'object1',
        default: {},
    },
}