Opções: Composição ​

provide ​

Fornece valores que podem ser injetados pelos componentes descendentes.

• Tipo

  ts

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

• Detalhes

  provide e inject são usadas ao mesmo tempo para permitir um componente ancestral servir como um injetor de dependência para todos os seus descendentes, independentemente de quão profunda é a hierarquia do componente, enquanto estiverem na mesma cadeia primaria.

  A opção provide deve ser ou um objeto ou uma função que retorna um objeto. Este objeto contém as propriedades que estão disponíveis para a injeção para os seus descendentes. Nós podemos usar símbolos como chaves neste objeto.

• Exemplo

  Uso básico:

  js

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

  Usando uma função para fornecer o estado por componente:

  js

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

  Nota que no exemplo acima, a msg fornecida NÃO será reativa. Consulte Trabalhando com a Reatividade por mais detalhes.

• Consulte também Fornecer ou Injetar

inject ​

Declara as propriedades a injetar no componente atual localizando-as a partir dos fornecedores ancestrais.

• Tipo

  ts

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

• Detalhes

  A opção inject deve ser:

  • Um vetor de sequências de caracteres, ou
  • Um objeto onde as chaves são o nome de vínculo local e o valor é ou:
    • A chave (sequência de caracteres ou símbolo) à procurar nas injeções disponíveis, ou
    • Um objeto onde:
      • A propriedade from é a chave (sequência de caracteres ou símbolo) à procurar nas injeções disponíveis, e
      • A propriedade default é usada como valor de retrocesso. Semelhante aos valores padrão das propriedades, uma função de fábrica é necessária para os tipos de objeto para impedir a partilha de valor entre várias instância do componente.

  Uma propriedade injetada será undefined se nenhuma propriedade correspondente e nem um valor padrão foi fornecido.

  Nota que os vínculos injetados NÃO são reativos. Isto é intencional. No entanto, se o valor injetado for um objeto reativo, as propriedades deste objeto permanecem reativas. Consulte Trabalhando com a Reatividade por mais detalhes.

• Exemplo

  Uso básico:

  js

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

  Usando um valor injetado como padrão para uma propriedade:

  js

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

  Usando um valor injetado como entrada de dados:

  js

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

  As injeções podem ser opcionais com valor padrão:

  js

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

  Se precisar ser injetado a partir duma propriedade com um nome diferente, use from para denotar a propriedade da fonte:

  js

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

  Semelhante aos padrões de propriedade, precisamos usar uma função de fábrica para os valores não primitivos:

  js

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

• Consulte também Fornecer ou Injetar

mixins ​

Uma vetor de objetos opcionais a serem misturados no componente atual.

• Tipo

  ts

  interface ComponentOptions {
    mixins?: ComponentOptions[]
  }

• Detalhes

  A opção mixins aceita um vetor de objetos de mistura. Estes objetos de mistura podem conter opções de instância como objetos de instância normais, e serão combinadas contra as opções eventuais usando a lógica de combinação de opção certa. Por exemplo, se a nossa mistura contiver um gatilho updated e o próprio componente também tiver um, ambas funções serão chamadas.

  Os gatilhos da mistura são chamados na ordem que são fornecidos, e chamados bem antes dos gatilhos do próprio componente.

  NÃO É MAIS RECOMENDADO

  Na Vue 2, as misturas eram o mecanismo primário para criação de pedaços reutilizáveis da lógica do componente. Embora as misturas continuam a ser suportadas na Vue 3, as Funções de Composição usando a API de Composição agora são a abordagem preferida para reutilização de código entre os componentes.

• Exemplo

  js

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

extends ​

Um componente de "classe de base" a partir do qual estender.

• Type:

  ts

  interface ComponentOptions {
    extends?: ComponentOptions
  }

• Detalhes

  Permite que um componente estenda outro, herdando suas opções de componente.

  A partir duma perspetiva de implementação, extends é quase idêntico à mixins. O componente especificado pela extends será tratado como se fosse a primeira mistura.

  No entanto, extends e mixins expressam diferentes intenções. A opção mixins é primariamente usada para compor pedaços de funcionalidade, ao passo que extends está primariamente preocupada com a herança.

  Tal como acontece com a mixins, quaisquer opções (exceto para setup()) serão combinadas usando a estratégia de combinação relevante.

• Exemplo

  js

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

  NÃO RECOMENDADA PARA API DE COMPOSIÇÃO

  extends está desenhada para a API de Opções e não lida com a combinação do gatilho setup().

  Na API de Composição, o modelo mental preferido para reutilização da lógica é "composição" acima da "herança". Se tivermos lógica dum componente que precisa ser reutilizada num outro, consideramos extrair a lógica relevante para uma Função de Composição.

  Se ainda tencionamos "estender" um componente usando a API de Composição, podemos chamar a setup() do componente de base na setup() do componente que se estende:

  js

  import Base from './Base.js'
  
  export default {
    extends: Base,
    setup(props, ctx) {
      return {
        ...Base.setup(props, ctx),
        // vínculos locais
      }
    }
  }