# DOM

# template

• Tipo: string

• Detalles:

  Una plantilla de cadena de caracteres que puede ser utilizada como etiquetado para la instancia de componente. La plantilla reemplzará el innerHTML del elemento montado. Cualquier etiquetado existente dentro del elemento montado será ignorado, a menos que los slots de distribución de contenido son presentes en la plantilla.

  Si la cadena de caracteres empieza con #, será utilizada como un querySelector y se utiliza el innerHTML del elemento eligido como la cadena de caracteres de plantilla. Este permite el uso del truco común <script type="x-template"> para incluir plantillas.

  Note

  Desde una perspectiva de seguridad, debería solo utilizar plantillas de Vue en que confía. Nunca utilice contenido generado por el usuario como su plantilla.

  Note

  Si se encuentra función de render en la opción Vue, la plantilla será ignorada.

• Vea también:

  • Diagrama de Ciclo de Vida
  • Distribución de contenido con Slots

# render

• Tipo: Function

• Detalles:

  Una alternativa para plantillas de cadena de caracteres permitíendole apalancar el poder programático completo de JavaScript.

• Uso:

  <div id="app" class="demo">
    <my-title blog-title="Un Vue Perfecto"></my-title>
  </div>
  

  1
  2
  3
  

  const { createApp, h } = Vue
  const app = createApp({})
  
  app.component('my-title', {
    render() {
      return h(
        'h1', // nombre de la etiqueta,
        this.blogTitle // contenido de la etiqueta
      )
    },
    props: {
      blogTitle: {
        type: String,
        required: true
      }
    }
  })
  
  app.mount('#app')
  

  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14
  15
  16
  17
  18
  19
  

  Note

  La función render tiene prioridad sobre la función render compilada desde la opción template o las plantillas HTML dentro del DOM del elemento montado.

• Vea también: Funciones de Renderización