• 首页
  • vue
  • TypeScript
  • JavaScript
  • scss
  • css3
  • html5
  • php
  • MySQL
  • redis
  • jQuery
  • attribute 透传

    “透传 attribute”的意思是把attribute透漏给一个组件,或者把 v-on 事件监听器传递一个组件。但在所接收组件上,并没有显式地声明的propsemits来接收。最常见的例子就是classstyleid attribute。

    Attribute 继承

    当一个组件以单个元素为根作渲染时,透传的 attribute 会自动添加到根元素的 attribute 中。

    举个例子,下面这个<MyButton>组件有这样的模板:

    <!-- <MyButton> 的模板 -->
    <button>click me</button>
    

    一个父组件使用了这个组件:

    <MyButton class="large" />
    

    最后渲染出的 DOM 结果是:

    <button class="large">click me</button>
    


    对 class 和 style 的合并

    如果一个子组件的根元素已经有了classstyle attribute,它会和从父组件上继承的值合并。

    将之前的<MyButton>组件的模板改成这样:

    <!-- <MyButton> 的模板 -->
    <button class="btn">click me</button>
    

    最后渲染出的 DOM 结果是:

    <button class="btn large">click me</button>
    


    v-on 监听器继承

    同样的规则也适用于v-on事件监听器:

    <MyButton @click="onClick" />
    

    监听器 click 会被添加到<MyButton>的根元素,即那个原生的<button>元素之上。当原生的<button>被点击,会触发父组件的onClick方法。如果原生button元素已经通过v-on绑定了一个事件监听器,则这些监听器都会被触发。


    深层组件继承

    如果一个组件在根节点上渲染另一个组件,例如,我们重构一下<MyButton>,让它在根节点上渲染<BaseButton>

    <!-- <MyButton/> 的模板,只是渲染另一个组件 -->
    <BaseButton />
    

    此时<MyButton>接收的透传 attribute 会直接传向<BaseButton>

    请注意:

    • 直传的 attribute 不会包含<MyButton>上声明过的props或是针对emits声明事件的 v-on 侦听函数,换句话说,声明过的props和侦听函数被<MyButton>“消费”了。
    • 直传的 attribute 若符合声明,也可以作为props传入<BaseButton>


    禁用 Attribute 继承

    如果你不想要一个组件自动地继承 attribute,你可以在组件选项中设置inheritAttrs:false

    如果你使用了<script setup>,你需要一个额外的<script>块来书写这个选项声明:

    <script>
    // 使用一个简单的 <script> to declare options
    export default {
      inheritAttrs: false
    }
    </script>
    
    <script setup>
    // ...setup 部分逻辑
    </script>
    

    最常见的需要禁用 attribute 继承的场景,就是 attribute 需要应用在根节点以外的其他元素上。通过设置inheritAttrs:false,你可以完全控制透传进来的 attribute 如何应用。


    这些透传进来的 attribute,可以在模板的表达式中,直接用$attrs访问到。

    <span>Fallthrough attribute: {{ $attrs }}</span>
    

    这个$attrs对象包含了除组件的propsemits属性外的所有其他 attribute,例如classstylev-on监听器等等。


    注意:
    • props有所不同,透传attributes在 JavaScript 中保留了它们原始的大小写,所以像foo-bar这样的一个 attribute 需要通过$attrs['foo-bar']来访问。
    • @click这样的一个v-on事件监听器将在此对象下被暴露为一个函数$attrs.onClick


    现在我们要再次使用一下之前小节中的<MyButton>组件例子。有时候我们可能为了样式,需要在<button>元素外包装一层<div>

    <div class="btn-wrapper">
      <button class="btn">click me</button>
    </div>
    

    我们想要所有像 class 和 v-on 监听器这样的透传 attribute 都应用在内部的<button>上而不是外层的<div>上。我们可以通过设定inheritAttrs:false和使用v-bind="$attrs"来实现:

    <div class="btn-wrapper">
      <button class="btn" v-bind="$attrs">click me</button>
    </div>
    

    请记住:没有参数的v-bind会将一个对象的所有属性,都作为 attribute 应用到目标元素上


    多根节点的 Attribute 继承

    和单根节点组件有所不同,有着多个根节点的组件没有自动 attribute 透传行为。如果$attrs没有被显式绑定,将会抛出一个运行时警告。

    <CustomLayout id="custom-layout" @click="changeValue" />
    

    如果<CustomLayout>有下面这样的多根节点模板,由于 Vue 不知道要将 attribute 透传到哪里,所以会抛出一个警告。

    <header>...</header>
    <main>...</main>
    <footer>...</footer>
    

    如果$attrs被显式绑定,则不会有警告:

    <header>...</header>
    <main v-bind="$attrs">...</main>
    <footer>...</footer>
    


    在 JavaScript 中访问透传 Attributes

    如果需要,你可以在<script setup>中使用useAttrs() API 来访问一个组件的所有透传 attribute:

    <script setup>
    import { useAttrs } from 'vue'
    
    const attrs = useAttrs()
    </script>
    

    如果没有使用<script setup>attrs会作为setup()上下文对象的一个属性暴露:

    export default {
      setup(props, ctx) {
        // 透传 attribute 被暴露为 ctx.attrs
        console.log(ctx.attrs)
      }
    }
    

    需要注意的是,虽然这里的attrs对象总是反映为最新的透传 attribute,但它并不是响应式的(考虑到性能因素)。你不能通过侦听器去监听它的变化。

    若侦听器去监听此数据的变化,可以使用prop传递数据的具备响应性。侦听器去监听此数据的变化,还可以使用onUpdated()使得在每次更新时结合最新的attrs执行effect副作用。

    上篇:组件事件

    下篇:依赖注入