组合选项 ​

provide ​

用于提供可以被后代组件注入的值。

• 类型

  ts

  interface ComponentOptions {
    provide?: object | ((this: ComponentPublicInstance) => object)
  }

• 详细信息

  provide和inject通常成对一起使用，使一个祖先组件作为其后代组件的依赖注入方，无论这个组件的层级有多深都可以注入成功，只要他们处于同一条组件链上。

  这个provide选项应当是一个对象或是返回一个对象的函数。这个对象包含了可注入其后代组件的属性。你可以在这个对象中使用 Symbol 类型的值作为 key。

• 示例

  基本使用方式：

  js

  const s = Symbol()
  
  export default {
    provide: {
      foo: 'foo',
      [s]: 'bar'
    }
  }

  使用函数可以提供其组件中的状态：

  js

  export default {
    data() {
      return {
        msg: 'foo'
      }
    }
    provide() {
      return {
        msg: this.msg
      }
    }
  }

  请注意，针对上面这个例子，所供给的msg将不会是响应式的。请查看和响应式数据配合使用一节获取更多细节。

• 参考依赖注入

inject ​

用于声明要通过从上层提供方匹配并注入进当前组件的属性。

• 类型

  ts

  interface ComponentOptions {
    inject?: ArrayInjectOptions | ObjectInjectOptions
  }
  
  type ArrayInjectOptions = string[]
  
  type ObjectInjectOptions = {
    [key: string | symbol]:
      | string
      | symbol
      | { from?: string | symbol; default?: any }
  }

• 详细信息

  该inject选项应该是以下两种之一：

  • 一个字符串数组
  • 一个对象，其 key 名就是在当前组件中的本地绑定名称，而它的值应该是以下两种之一：
    • 匹配可用注入的 key (string 或者 Symbol)
    • 一个对象
      • 它的from属性是一个 key (string 或者 Symbol)，用于匹配可用的注入
      • 它的default属性用作候补值。和 props 的默认值类似，如果它是一个对象，那么应该使用一个工厂函数来创建，以避免多个组件共享同一个对象。

  如果没有供给相匹配的属性、也没有提供默认值，那么注入的属性将为undefined。

  请注意，注入绑定并非响应式的。这是有意为之的一个设计。如果要注入的值是一个响应式对象，那么这个对象上的属性将会保留响应性。请看配合响应性一节获取更多细节。

• 示例

  基本使用方式：

  js

  export default {
    inject: ['foo'],
    created() {
      console.log(this.foo)
    }
  }

  使用注入的值作为 props 的默认值：

  js

  const Child = {
    inject: ['foo'],
    props: {
      bar: {
        default() {
          return this.foo
        }
      }
    }
  }

  使用注入的值作为 data：

  js

  const Child = {
    inject: ['foo'],
    data() {
      return {
        bar: this.foo
      }
    }
  }

  注入项可以选择是否带有默认值：

  js

  const Child = {
    inject: {
      foo: { default: 'foo' }
    }
  }

  如果需要从不同名字的属性中注入，请使用from指明来源属性。

  js

  const Child = {
    inject: {
      foo: {
        from: 'bar',
        default: 'foo'
      }
    }
  }

  和 props 默认值类似，对于非原始数据类型的值，你需要使用工厂函数：

  js

  const Child = {
    inject: {
      foo: {
        from: 'bar',
        default: () => [1, 2, 3]
      }
    }
  }

• 参考依赖注入

mixins ​

一个包含组件选项对象的数组，这些选项都将被混入到当前组件的实例中。

• 类型

  ts

  interface ComponentOptions {
    mixins?: ComponentOptions[]
  }

• 详细信息

  

  mixins选项接受一个 mixin 对象数组。这些 mixin 对象可以像普通的实例对象一样包含实例选项，它们将使用一定的选项合并逻辑与最终的选项进行合并。举例来说，如果你的 mixin 包含了一个created钩子，而组件自身也有一个，那么这两个函数都会被调用。

  Mixin 钩子的调用顺序与提供它们的选项顺序相同，且会在组件自身的钩子前被调用。

  不再推荐

  在 Vue 2 中，mixins 是创建可重用组件逻辑的主要方式。尽管在 Vue 3 中保留了 mixins 支持，但对于组件间的逻辑复用，使用组合式 API 的组合式函数是现在更推荐的方式。

• 示例

  js

  const mixin = {
    created() {
      console.log(1)
    }
  }
  
  createApp({
    created() {
      console.log(2)
    },
    mixins: [mixin]
  })
  
  // => 1
  // => 2

extends ​

要继承的“基类”组件。

• 类型

  ts

  interface ComponentOptions {
    extends?: ComponentOptions
  }

• 详细信息

  使一个组件可以继承另一个组件的组件选项。

  从实现角度来看，extends几乎和mixins相同。通过extends指定的组件将会当作第一个 mixin 来处理。

  然而，extends和mixins表达的是不同的目标。mixins选项基本用于组合功能，而extends则一般更关注继承关系。

  同mixins一样，所有选项 (setup()除外) 都将使用相关的策略进行合并。

• 示例

  js

  const CompA = { ... }
  
  const CompB = {
    extends: CompA,
    ...
  }

  不建议用于组合式 API

  extends是为选项式 API 设计的，不会处理setup()钩子的合并。

  在组合式 API 中，逻辑复用的首选模式是“组合”而不是“继承”。如果一个组件中的逻辑需要复用，考虑将相关逻辑提取到组合式函数中。

  如果你仍然想要通过组合式 API 来“继承”一个组件，可以在继承组件的setup()中调用基类组件的setup()：

  js

  import Base from './Base.js'
  export default {
    extends: Base,
    setup(props, ctx) {
      return {
        ...Base.setup(props, ctx),
        // 本地绑定
      }
    }
  }

图片声明：本站部分配图来自网络。本站只作为美观性配图使用,无任何非法侵犯第三方意图,一切解释权归图片著作权方,本站不承担任何责任。如有恶意碰瓷者,必当奉陪到底严惩不贷!