Atributo inheritAttrs de Vue3

Vue3 选项式 APIAPI de opciones de Vue3

En Vue3,inheritAttrses una opción de componente que determina si los atributos no prop (es decir, atributos no definidos explícitamente como prop) pasados del componente padre al componente hijo deben heredarse en el elemento raíz del componente hijo.

Por defecto,inheritAttrstiene el valor detrue, lo que significa que...inheritAttrsestablecer enfalse。

Cómo entenderinheritAttrs？

Imagina que tienes un componenteMyButton, que recibe unlabelcomo prop, y deseas que el componente padre pueda pasar algunos atributos adicionales, comoclassostyle. Por defecto, estos atributos adicionales se enlazarán directamente aMyButtondel elemento raíz de (normalmente un<button>elemento).

Ejemplo

// MyButton.vue
<template>
  <button :class="$attrs.class"> {{ label }} </button>
</template>

<script>
export default {
  props: ['label'],
  inheritAttrs: true
}
</script>

En este ejemplo, si el componente padre pasa unclassatributo, se enlazará automáticamente alMyButtonde<button>elemento.

inheritAttrs: falseLa función de

Si no deseas que estos atributos no prop se enlacen automáticamente al elemento raíz, puedesinheritAttrsestablecer enfalse. De esta manera, puedes decidir manualmente cómo se deben manejar estos atributos.

Ejemplo

// MyButton.vue
<template>
  <div>
    <button> {{ label }} </button>
    <span v-bind="$attrs">Additional Attributes</span>
  </div>
</template>

<script>
export default {
  props: ['label'],
  inheritAttrs: false
}
</script>

En este ejemplo, los atributos no prop no se enlazarán al<button>elemento, sino que se enlazarán al<span>elemento.v-bind="$attrs"enlazar los atributos a cualquier elemento que desees.

Casos de uso

  1. Vinculación de atributos personalizados: cuando no desees que los atributos no prop se enlacen automáticamente al elemento raíz, puedes deshabilitarinheritAttrs, y controlar manualmente la forma en que se enlazan estos atributos.

  2. Evitar conflictos de atributos: en algunos casos, los atributos no prop enlazados automáticamente pueden entrar en conflicto con los atributos del componente hijo. DeshabilitarinheritAttrspuede evitar este problema.

  3. Desarrollo avanzado de componentes: al desarrollar componentes complejos, es posible que necesites manejar de manera más flexible la transmisión y el enlace de los atributos.inheritAttrs: falseproporciona esta flexibilidad.

Vue3 选项式 APIAPI de opciones de Vue3

Otras extensiones