Vue 3 迁移策略笔记—— 第4节：$attrs 包括class&style

前言

本笔记主要基于官方文档《迁移策略——$attrs包括class&style》汇总而来。如有理解出入，请以官方文档为主。建议您以官方文档为主，本文为辅。这样您可以“以自己为主”审视的阅读，从而不被我的观点带偏。

概述

Vue 3.x 中， $attrs将包含传递给组件的所有属性，包括class和style

Vue 2.x 的$attrs

在 Vue 2.x 中，关于父组件使用子组件有这样一个原则：

默认情况下父作用域的不被认作 props 的 attribute 绑定 (attribute bindings) 将会“回退”且作为普通的 HTML attribute 应用在子组件的根元素上。

——《Vue Api :inheritAttrs》

这句话的意思是，父组件调用子组件时，给子组件锚点标签添加的属性中，除了在子组件的props中声明的属性，其他属性会自动添加到子组件根元素上。

如下：

子组件

<template>
 <label>
    <input type="text"/>
  label>
template>
<script>
export default {
  name: '$attrsIncludesClass&Style',
  props:{
    attrA: String
  }
}
script>

父组件

<template>
  <div>
    <child attrA="inProps" attrB="outProps">child>
  div>
template>
<script>
import child from "@/components/classANdStyle/child.vue";
export default {
  components:{
    child
  }
};
script>

浏览器渲染的结果：

<div>
  <label attrb="outProps">
    <input type="text"/>
  label>
div>

可以看到，attrA并没有被自动添加到子组件根元素上。

然而，有时候我们并不想要属性自动添加到子组件根元素。我们要的是属性能够添加到子组件指定的元素上。

为此，Vue 2.x 添加了inheritAttrs。

当撰写包裹一个目标元素或另一个组件的组件时，这可能不会总是符合预期行为。通过设置 inheritAttrs ：false，这些默认行为将会被去掉。而通过 (同样是 2.4 新增的) 实例 property $attrs 可以让这些 attribute 生效，且可以通过 v-bind 显性的绑定到非根元素上。

注意：这个选项不影响 class 和 style 绑定。

如下：

子组件

<template>
 <label>
    <input type="text" v-bind="$attrs" />
  label>
template>
<script>
export default {
  name: '$attrsIncludesClass&Style',
  inheritAttrs: false,
  props:{
    attrA: String
  }
}
script>

父组件

<template>
  <div>
    <child id="my-id" class="my-class" attrA="inProps">child>
  div>
template>
<script>
import child from "@/components/classANdStyle/child.vue";
export default {
  components:{
    child
  }
};
script>

浏览器渲染结果：

<div>
  <label class="my-class">
    <input type="text" id="my-id" attrb="outProps"/>
  label>
div>

可以看到，属性id和attrB添加到input上而不是子组件根元素。

但是呢！我们还注意到，class并没有一并添加到input中。这是因为$attrs并没有包含class和style。

Vue 3.x 对 $attrs 的调整

好在，Vue 3.x 解决了这个问题。在 Vue 3.x 中 $attrs将包含传递给组件的所有属性，包括class和style。

上面例子，在 Vue 3.x 中渲染结果如下：

<div>
  <label>
    <input type="text" id="my-id" class="my-class" attrb="outProps" />
  label>
div>

---

本系列目录

• Vue 3 迁移策略笔记—— 第1节：v-for 中的 Ref 数组

• Vue 3 迁移策略笔记—— 第2节：Async Components 异步组件

• Vue 3 迁移策略笔记—— 第3节：Attribute Coercion Behavior （属性强制行为）

• Vue 3 迁移策略笔记——第4节：$attrs 包括class&style

• Vue 3 迁移策略笔记—— 第5节：移除 $children

• Vue 3 迁移策略笔记—— 第6节：自定义指令

• Vue 3 迁移策略笔记—— 第7节：自定义元素交互

• Vue 3 迁移策略笔记—— 第8节：Data 选项

• Vue 3 迁移策略笔记—— 第9节：新增 emits 选项

• Vue 3 迁移策略笔记—— 第10节：事件 API

• Vue 3 迁移策略笔记—— 第11节：移除过滤器

• Vue 3 迁移策略笔记—— 第12节：片段

• Vue 3 迁移策略笔记—— 第13节：函数式组件

• Vue 3 迁移策略笔记—— 第14节：全局 API

• Vue 3 迁移策略笔记—— 第15节：全局 API 的 tree shaking

• Vue 3 迁移策略笔记—— 第16节：Inline Template 属性

• Vue 3 迁移策略笔记—— 第17节：Key 属性

• Vue 3 迁移策略笔记—— 第18节：按键修饰符

• Vue 3 迁移策略笔记—— 第19节：移除 $listeners

• Vue 3 迁移策略笔记—— 第20节：Props 的默认值函数不能访问this

• Vue 3 迁移策略笔记—— 第21节：渲染函数 API

• Vue 3 迁移策略笔记—— 第22节：Slots 的统一

• Vue 3 迁移策略笔记—— 第23节：Transition Class 的变化

• Vue 3 迁移策略笔记—— 第24节：Transition Group 不再需要设置根元素

• Vue 3 迁移策略笔记—— 第25节：v-on.native修饰符被移除

• Vue 3 迁移策略笔记—— 第26节：在组件上使用 v-model 的变化

• Vue 3 迁移策略笔记—— 第27节：v-if 和 v-for 的优先级

• Vue 3 迁移策略笔记—— 第28节：v-bind 合并行为

• Vue 3 迁移策略笔记—— 第29节：数组的监听