【Vue第十七章】透传 Attributes及其使用场景

MagnumHou

已于 2023-09-14 10:31:25 修改

阅读量751

点赞数 4

分类专栏： Vue 前端开发文章标签： vue.js javascript 前端

于 2023-02-01 17:48:31 首次发布

本文链接：https://blog.csdn.net/qq_39335404/article/details/128837950

版权

前端开发同时被 2 个专栏收录

86 篇文章 6 订阅

订阅专栏

Vue

64 篇文章 15 订阅

订阅专栏

文章目录

前言

透传 attribute指的是传递给一个组件，却没有被该组件声明为 props 或 emits 的 attribute 或者 v-on 事件监听器。最常见的例子就是 class、style 和 id。

数字化管理平台
 Vue3+Vite+VueRouter+Pinia+Axios+ElementPlus
权限系统-商城
 个人博客地址

一、根组件继承

默认情况下，当一个组件以单个元素为根作渲染时，透传的 attribute 会自动被添加到根元素上（直接自动继承）。

MyButton 组件模板

<template>
	<button class="btn" style="border:solid 1px #e7e7e7;"  @click="btnClick">click me</button>
</template>

一个父组件使用了这个组件，并且传入了 class

<MyButton class="large" style="outline:none;" @click="clickHandle"/>

最后渲染出的 DOM 结果是

<button class="btn large" style="border:solid 1px #e7e7e7;outline:none;">click me</button>

一个根组件，添加的 class、style 直接作用于根元素上(直接继承)
如果一个子组件的根元素已经有了 class、style，它会和从父组件上继承的值合并；event 同理，继承和根元素的事件都会执行。

二、深层组件继承

有些情况下，一个组件（如：MyButton）会在根节点上渲染另一个组件（如：BaseButton）。此时 MyButton 接收的透传attribute会直接继续传给 BaseButton。如下 MyButton 组件：

<template>
	<BaseButton />
</template>

三、模板中访问透传 `attribute`

3.1 禁用 Attributes 继承

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

<script>
    export default {
      inheritAttrs: false
    }
</script>

<script setup>
	// 部分逻辑
</script>

禁用 attribute 继承的场景：attribute 需要应用在根节点以外的其他元素上。

3.2 模板中访问透传 `attribute`

透传进来的 attribute 可以在模板表达式中直接用 $attrs 访问到。这个 $attrs 对象包含了除组件所声明的 props 和 emits 之外的所有其他 attribute，例如 class，style，v-on 监听器等等。

<span>透传属性: {{ $attrs }}</span>

MyButton组件模板

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

<script>
	exports default {
		inheritAttrs:false
	}
<script>
<script setup>
	// 组合式 API 代码
</script>
<template>
	<div class="btn-wrapper">
		<button class="btn" v-bind="$attrs">click me</button>
    </div>
</template>

3.3 多根节点的 Attributes 继承

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

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

如下 BaseLayout 组件模板：

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

如果 $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>

需要注意的是，虽然这里的 attrs 对象总是反映为最新的透传 attribute，但它并不是响应式的 (考虑到性能因素)。你不能通过侦听器去监听它的变化。如果你需要响应性，可以使用 prop。或者你也可以使用 onUpdated() 使得在每次更新时结合最新的 attrs 执行副作用。

五、使用场景

组件隔代通讯：v-bind=“ $a tt rs ” ， v - bin d = “$ listeners”，EventBus

5.1 用于组件之间的隔代传值

如有父组件A，子组件B，孙组件C 三个组件。

在A组件中传值给C，可直接在B中的C上设置v-bind=“$attrs”，然后在C组件中用prop接收，此时就直接把值传给了C。

组件A

<template>
  <bCom msg='我是A组件的'/>
</template>

组件B

<template>
  <cCom v-bind="$attrs"/>
</template>

组件C

<template>
  <div>A传递过来的值:{{msg}}</div>
</template>
 
<script>
export default {
  name: 'cCom',
  props: {
    msg:{ //接收A传递的msg
      typeof:String,
      default:''
    }
  },
}
</script>

5.2 用于底层组件向高级层组件传递信息

如有父组件A，子组件B，孙组件C 三个组件，如果C传递信息给B则可直接使用 $e mi t ，如果是 C 向 A 传递信息还使用$ emit,则就需要C先 $e mi t 给 B ， B 再$ emit给A，这种方式比较繁琐，则此时可以在B中的C上设置v-on="$listeners"来满足当前需求

A组件

<template>
  <bCom @Msg='Msg'/>
</template>
 
methods:{
  Msg(val){
    console.log(val) 
  }

B组件

 <template>
  <cCom v-on="$listeners"/>
</template>

C组件

<template>
  <div @click="onClick">C组件</div>
</template>
 
onClick(){
  this.$emit("Msg",'我属于C组件')
}

5.3 事件总线

事件总线EventBus，相当于一个全局的仓库，任何组件都可以去这个仓库里获取事件。主要用于组件之间的传值，例如：父子传值，兄弟传值，隔代传值。

在main.js中全局初始化EventBus

Vue.prototype.$EventBus = new Vue()

在A组件中向EventBus发送事件

this.$EventBus.$emit("msg", '123');

在B组件中接收事件

 mounted() {
    this.$EventBus.$on("msg", (data) => {
      this.msg = data;
    });
 }

第四步：移除监听
上述三步中A组件向B组件进行传递了数据，但当离开B组件再次进入B组件时，时间总线里就有多个监听，会导致事件只触发了一次，但监听事件中的回调函数执行了很多次，所以在组件离开前，也就是被销毁前，需要将该监听事件给移除，以免下次再重复创建监听。
```
beforeDestroy(){
    //移除监听事件"msg"
    this.$EventBus.$off("msg")
}
```