Atributos integrados de Vue3

En Vue.js, `is`, `key` y `ref` son tres atributos integrados de uso común, con los siguientes usos.

Atributo Función principal Uso/Ejemplo
is Resuelve las limitaciones de sintaxis de las etiquetas HTML y especifica dinámicamente el componente/etiqueta nativa a renderizar.

`<etiqueta is="nombre-del-componente">`
`<component :is="variable">`

<ul><li is="my-component"></li></ul>
key Proporciona un identificador único al DOM virtual de Vue, mejora la eficiencia del renderizado de listas y garantiza el estado correcto del componente. `<etiqueta key="valor-único">`
`<etiqueta :key="item.id">`
<div v-for="item in list" :key="item.id">{{item}}</div>
ref Obtiene elementos DOM o instancias de componentes, utilizado para manipular directamente el DOM nativo/llamar métodos de componentes hijos. Plantilla: `ref="nombre"`
Script: `this.$refs.nombre`
<input ref="inputRef">
this.$refs.inputRef.focus()

is 属性

En Vue.js, el atributo `is` se utiliza normalmente para implementar componentes dinámicos, especialmente cuando deseas cambiar dinámicamente diferentes componentes en tiempo de ejecución.

  • Tipo: String u Object
  • Función: isEl atributo `is` se utiliza para especificar dinámicamente el<component>componente hijo que debe renderizar el componente actual. Generalmente se combina con las características de los<component>elementos y componentes dinámicos, lo que permite cambiar entre diferentes componentes en tiempo de ejecución según los datos.

Ejemplo

<template>
  <div>
    <component :is="currentComponent"></component>
    <button @click="toggleComponent">Toggle Component</button>
  </div>
</template>

<script>
import FirstComponent from './FirstComponent.vue';
import SecondComponent from './SecondComponent.vue';

export default {
  data() {
    return {
      currentComponent: 'FirstComponent'
    };
  },
  components: {
    FirstComponent,
    SecondComponent
  },
  methods: {
    toggleComponent() {
      this.currentComponent = this.currentComponent === 'FirstComponent' ? 'SecondComponent' : 'FirstComponent';
    }
  }
};
</script>

En el código anterior,currentComponentes una propiedad de datos que determina<component>el componente específico que el elemento debe renderizar. Cuando se hace clic en el botón, se llama altoggleComponentmétodo, que cambiará elcurrentComponentvalor de la propiedad, cambiando así dinámicamente el componente renderizado.

Notas:

  • Notas:
    • isEl valor del atributo puede ser una cadena con el nombre del componente o un objeto de componente.
    • Cuando se usa una cadena, el nombre del componente debe coincidir con el nombre del componente registrado.
    • Si se usa un objeto, se puede hacer referencia directamente al objeto del componente o usar una propiedad computada dinámica para devolver el objeto del componente.

key 属性

  • Tipo: String o Number

  • Función: En el renderizado de listas de Vue.js, cadav-forelemento del bucle necesita unkeyatributo `key` único.keyLa función de `key` es ayudar a Vue a identificar la unicidad de cada nodo, actualizando así eficientemente el DOM virtual. Cuando Vue vuelve a renderizar la lista, según el valor de `key`,keydecidirá si reutilizar los elementos DOM existentes o recrearlos.

    Ejemplo

    <ul>
      <li v-for="item in items" :key="item.id">{{ item.name }}</li>
    </ul>

    En el código anterior, `key` se utilizaitem.idcomokeyatributo, lo que garantiza que cada elemento de la lista sea identificado y procesado correctamente por Vue cuando se actualicen los datos.

  • Notas:

    • key`key` debe ser único y estable. Estable significa quekey`key` no debe cambiar con los cambios de los datos; de lo contrario, se verán afectados el rendimiento de Vue y la estrategia de reutilización del DOM virtual.
    • Evita usar el índice comokey`key`, a menos que sepas claramente que el orden de los elementos de la lista no cambiará.

ref 属性

  • Tipo: String u Object

  • Función: ref`ref` se utiliza para registrar información de referencia para elementos o componentes hijos. En el desarrollo real, puedes usar `ref`refpara acceder a elementos DOM específicos o a instancias de componentes hijos y realizar operaciones como llamar métodos, acceder a propiedades, etc.

Agregar `ref` a un elemento DOM

Ejemplo

<template>
  <div>
    <input type="text" ref="inputField">
  </div>
</template>

<script>
export default {
  mounted() {
`console.log(this.$refs.inputField); // accede al elemento DOM`
`this.$refs.inputField.focus(); // llama al método del elemento DOM`
  }
}
</script>

Agregar `ref` a un componente hijo

Ejemplo

<template>
  <div>
    <child-component ref="childRef"></child-component>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  mounted() {
`console.log(this.$refs.childRef); // accede a la instancia del componente hijo`
`this.$refs.childRef.doSomething(); // llama al método del componente hijo`
  }
}
</script>

Notas:

  • Cuando se usa `ref` en la plantilla,refVue proporcionará un$refsobjeto correspondiente, a través del cual se puede acceder al elemento DOM o a la instancia del componente hijo registrados.
  • Evita abusar deref`ref`; siempre que sea posible, opera el DOM y los componentes hijos mediante el control basado en datos y el manejo de eventos, manteniendo la mantenibilidad y la claridad del código.
Otras extensiones