Opções: Interpretação ​

template ​

Um modelo de marcação de sequência de caracteres para o componente.

• Type

  ts

  interface ComponentOptions {
    template?: string
  }

• Detalhes

  Um modelo de marcação fornecido através da opção template que será compilada instantaneamente em tempo de execução. É suportado apenas quando usamos uma construção de Vue que inclui o compilador de modelo de marcação. O compilador de modelo de marcação NÃO está incluído nas construções de Vue que têm a palavra runtime em seus nomes, por exemplo. vue.runtime.esm-bundler.js. Consulte o guia de ficheiro de distribuição por mais detalhes sobre as diferentes construções.

  Se a sequência de caracteres começar com # será usada como uma querySelector e usará o innerHTML do elemento selecionado como modelo de marcação de sequência de caracteres. Isto permite o modelo de marcação da fonte ser escrito usando elementos <template> nativos.

  Se a opção render também estiver presente no mesmo componente, o template será ignorado.

  Se o componente de raiz da nossa aplicação não tiver uma opção template ou render especificada, a Vue tentará usar o innerHTML do elemento montado como modelo de marcação.

  Aviso de Segurança

  Só deveríamos usar modelos de marcação de fontes que possamos confiar. Não devemos usar conteúdo fornecido pelo utilizador como nosso modelo de marcação. Consulte o Guia de Segurança por mais detalhes.

render ​

Uma função que retorna programaticamente a árvore de DOM virtual do componente.

• Tipo

  ts

  interface ComponentOptions {
    render?(this: ComponentPublicInstance) => VNodeChild
  }
  
  type VNodeChild = VNodeChildAtom | VNodeArrayChildren
  
  type VNodeChildAtom =
    | VNode
    | string
    | number
    | boolean
    | null
    | undefined
    | void
  
  type VNodeArrayChildren = (VNodeArrayChildren | VNodeChildAtom)[]

• Detalhes:

  render é uma alternativa aos modelos de marcação de sequência de caracteres que permite-nos influenciar todo o poder programático da JavaScript de declarar a saída da interpretação do componente.

  Os modelos de marcação pré-compilados, por exemplo aqueles nos Componentes de Ficheiro Único, são compilados para a opção render em tempo de construção. Se ambos render e template estiverem presentes num componente, render receberá prioridade mais alta.

• Consulte também

  • Mecanismo de Interpretação
  • Funções de Interpretação

compilerOptions ​

Configura as opções do compilador de tempo de execução para o modelo de marcação do componente.

• Tipo

  ts

  interface ComponentOptions {
    compilerOptions?: {
      isCustomElement?: (tag: string) => boolean
      whitespace?: 'condense' | 'preserve' // predefinido como: 'condense'
      delimiters?: [string, string] // predefinido como: ['{{', '}}']
      comments?: boolean // predefinido como: false
    }
  }

• Detalhes

  Esta opção de configuração só é respeitada quando usamos a construção completa (por exemplo, o .vue.js autónomo que pode compilar modelos de marcação no navegador). Ela suporta as mesmas opções que o app.config.compilerOptions do nível de aplicação, e tem prioridade mais alta para o componente atual.

• Consulte também app.config.compilerOptions

slots ​

Uma opção para ajudar com a inferência de tipo quando usamos ranhuras programaticamente nas funções de interpretação. Apenas suportado na 3.3+.

• Detalhes

  Este valor de tempo de execução da opção não é usado. Os tipos verdadeiros devem ser declarados através da moldagem de tipo usando o tipo auxiliar SlotsType:

  ts

  import { SlotsType } from 'vue'
  
  defineComponent({
    slots: Object as SlotsType<{
      default: { foo: string; bar: number }
      item: { data: number }
    }>,
    setup(props, { slots }) {
      expectType<
        undefined | ((scope: { foo: string; bar: number }) => any)
      >(slots.default)
      expectType<undefined | ((scope: { data: number }) => any)>(
        slots.item
      )
    }
  })