选项: 组合

provide

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

类型

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

详情
provide 和 inject 一起使用，允许父组件作为所有后代组件的依赖注入器，无论组件层级有多深，只要它们在同一个父链中。
provide选项应该是一个对象或一个返回对象的函数。这个对象包含可注入其子组件的属性。您可以使用Symbol作为对象的键。

示例

基本用法

JavaScript

const s = Symbol()

export default {
  provide: {
    foo: 'foo',
    [s]: 'bar'
  }
}

使用函数提供每个组件的状态

JavaScript

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

注意，在上面的示例中，提供的msg将不会是响应式的。有关更多详细信息，请参阅与响应式一起工作。

另请参阅 提供/注入

注入

通过从祖先提供者定位声明要注入当前组件的属性。

类型

interface ComponentOptions {
  inject?: ArrayInjectOptions | ObjectInjectOptions
}

type ArrayInjectOptions = string[]

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

详情
inject选项可以是：
- 一个字符串数组，或者
- 一个对象，其中键是本地绑定名称，值可以是：
  - 在可用注入中搜索的键（字符串或Symbol），或者
  - 一个对象，其中
    - from属性是在可用注入中搜索的键（字符串或Symbol），
    - default属性用作后备值。与props默认值类似，对于对象类型需要工厂函数以避免多个组件实例之间的值共享。
如果未提供匹配的属性或默认值，则注入属性将为undefined。
请注意，注入绑定不是响应式的。这是故意的。但是，如果注入的值是响应式对象，该对象上的属性仍然保持响应式。有关更多详细信息，请参阅与响应式一起工作。

示例

基本用法

JavaScript

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

将注入值用作prop的默认值

JavaScript

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

将注入值用作数据条目

JavaScript

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

注入可以具有默认值的可选

JavaScript

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

如果需要从一个具有不同名称的属性中注入，请使用from来表示源属性

JavaScript

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

与非原始值类似，您需要为非原始值使用工厂函数

JavaScript

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

另请参阅 提供/注入

混入

要混合到当前组件中的选项对象数组。

类型

interface ComponentOptions {
  mixins?: ComponentOptions[]
}

详情
mixins选项接受一个混合对象数组。这些混合对象可以包含实例选项，就像正常的实例对象一样，它们将使用某些选项合并逻辑与最终选项合并。例如，如果您的混合包含一个created钩子，而组件本身也有一个，那么这两个函数都会被调用。
混合钩子按提供的顺序调用，并在组件自己的钩子之前调用。
不再推荐
在Vue 2中，混入是创建可重用组件逻辑块的主要机制。虽然Vue 3中仍然支持混入，但现在首选的方法是使用组合式API的可组合函数来在组件之间重用代码。

示例

JavaScript

const mixin = {
  created() {
    console.log(1)
  }
}

createApp({
  created() {
    console.log(2)
  },
  mixins: [mixin]
})

// => 1
// => 2

扩展

要从其扩展的“基类”组件。

类型

interface ComponentOptions {
  extends?: ComponentOptions
}

详情
允许一个组件扩展另一个组件，继承其组件选项。
从实现的角度来看，extends几乎与mixins相同。由extends指定的组件将被视为第一个混合。
但是，extends和mixins表达了不同的意图。mixins选项主要用于组合功能块，而extends主要关注继承。
与 mixins 一样，任何选项（除 setup() 外）都将使用相关的合并策略进行合并。
示例
JavaScript
```
const CompA = { ... }

const CompB = {
  extends: CompA,
  ...
}
```
不推荐用于 Composition API
extends 是为 Options API 设计的，不能处理 setup() 钩子的合并。
在 Composition API 中，逻辑复用的首选思维模式是“组合”而非“继承”。如果你有一个需要在其他组件中复用的逻辑，考虑将其相关逻辑提取到可组合（Composable）中。
如果你仍然打算使用 Composition API “扩展”一个组件，你可以在扩展组件的 setup() 中调用基组件的 setup()
JavaScript
```
import Base from './Base.js'
export default {
  extends: Base,
  setup(props, ctx) {
    return {
      ...Base.setup(props, ctx),
      // local bindings
    }
  }
}
```

在 GitHub 上编辑此页面

选项: 组合 ​

provide ​

注入 ​

混入 ​

扩展 ​

选项: 组合

provide

注入

混入

扩展