Vue--$attrs, $listeners--使用/教程/实例

怼烎@ 2023-10-02 17:38 18阅读 0赞

原文网址：[Vue--$attrs, $listeners--使用/教程/实例\_IT利刃出鞘的博客-CSDN博客][Vue--_attrs_ _listeners--_IT_-CSDN]

### 简介 ###

**说明**

本文用示例介绍Vue的$attrs和$listeners的用法。

**使用场景**

$attrs：用于父组件隔代向孙组件传值。

$listeners：用于孙组件隔代向父组件传值。

当然，这两个也可以同时使用，达到父组件和孙组件双向传值的目的。

**官网**

[API — Vue.js][API _ Vue.js]

**$attrs 和 $listeners介绍**

Vue2.4 中，引入了attrs 和 listeners ， 新增了 inheritAttrs 选项。

$attrs：包含了父作用域中没有被 prop 接收的所有属性（不包含class 和 style 属性）。可以通过 v-bind="$attrs" 直接将这些属性传入内部组件。

$listeners：包含所有父组件中的 v-on 事件监听器 (不包含 .native 修饰器的) ，可以通过 v-on="$listeners" 传入内部组件。

inheritAttrs为true：继承除props之外的所有属性；inheritAttrs为false：只继承class属性

## $attrs ##

### 简介 ###

![7ce5910a40364ef6a51fafb8aa20b4df.png][]

现有3个嵌套组件，A->B，B->C。

A组件传值给C组件，有多少种解决方案？

1.  Vuex我们使用vuex来进行数据管理，依赖于vuex我们可以一次改变，任何一个组件中都能获取。但是如果多个组件共享状态比较少，使用vuex过于麻烦和难以维护。element-ui中大量采用此方法。
2.  自定义vue bus事件总线，原理类似vuex，使用特别简单。bus适合碰到组件跨级兄弟组件等无明显依赖关系的消息传递，原生app开发中经常用到，但是缺点是bus破坏了代码的链式调用，大量的滥用将导致逻辑的分散，出现问题后很难定位，降低了代码可读性。
3.  使用B来做中转，A传递给B，B再给C\*\*，\*\*这是最容易想到的方案，但是如果嵌套的组件过多，需要传递的事件和属性较多，会导致代码繁琐，代码维护困难。

### 示例：父组件隔代传值给孙组件 ###

#### 代码 ####

**Parent.vue（父组件（顶层组件））**

<template>
      <div class="outer">
        <h3>父组件</h3>
    
        名字：<input v-model="name">
        年龄：<input v-model.number="age" type="number">
        电话：<input v-model="phoneNumber">
    
        <child :name="name" :age="age" :phoneNumber="phoneNumber"></child>
      </div>
    </template>
    
    <script>
    import Child from "./Child";
    export default {
      name: 'Parent',
      components: {Child},
      data() {
        return {
          name: 'Tony',
          age: 20,
          phoneNumber: '1234567890'
        }
      }
    }
    </script>
    
    <style scoped>
    .outer {
      margin: 20px;
      border: 2px solid red;
      padding: 20px;
    }
    </style>

**Child.vue（子组件（中间组件））**

子组件作为父组件和孙组件的传递中介，在儿子组件中给孙子组件添加v-bind="$attrs"，这样孙子组件才能接收到数据。

<template>
      <div class="outer">
        <h3>子组件</h3>
        <div>获得顶层组件的name：{
       {name}}</div>
        <grand-child v-bind="$attrs"></grand-child>
      </div>
    </template>
    
    <script>
    import GrandChild from "./GrandChild";
    export default {
      components: {GrandChild},
      props: ['name'],
      created() {
        console.log('Child=> $attrs: ' + JSON.stringify(this.$attrs));
      }
    }
    </script>
    
    <style scoped>
    .outer {
      margin: 20px;
      border: 2px solid blue;
      padding: 20px;
    }
    </style>

**GrandChild.vue（孙组件（最底层组件））**

孙组件使用props接收从父组件传递过来的数据。（也可以在created时接收数据）

<template>
      <div class="outer">
        <h3>孙组件</h3>
        <div>顶层组件的name：{
       {name}}</div>
        <div>顶层组件的age：{
       {age}}</div>
        <div>顶层组件的phoneNumber：{
       {phoneNumber}}</div>
      </div>
    </template>
    <script>
    export default {
      name: "GrandChild",
      props: {
        name: {
          type: String
        },
        age: {
          type: Number
        },
        phoneNumber: {
          type: String
        }
      },
      created() {
        // this.parentAge = this.age;  //也可以这样取值
        console.log('GrandChild=> $attrs: ' + JSON.stringify(this.$attrs));
      }
    
    }
    </script>
    
    <style scoped>
    .outer {
      margin: 20px;
      border: 2px solid green;
      padding: 20px;
    }
    </style>

**路由（store/index.js）**

import Vue from 'vue'
    import Router from 'vue-router'
    import Parent from "../components/Parent";
    
    Vue.use(Router)
    
    export default new Router({
      routes: [
        {
          path: '/parent',
          name: 'Parent',
          component: Parent,
        }
      ],
    })

#### 测试 ####

**测试1：访问**

访问：[http://localhost:8080/\#/parent][http_localhost_8080_parent]

![f2fd272ea919440987d85b9e8d32c36e.png][]

可以看到：

子组件的$attrs中包含了所有除了本组件props之外的父组件属性。

孙组件无法获取到已被子组件props接收的属性：name

孙组件可以获取到未被子组件props接收的属性：age，phoneNumber

**测试2：父组件动态传值给子孙组件**

![9148f589e59f4d48b79643d8dac3e904.gif][]

## $listeners ##

### 示例：孙组件隔代传值给父组件 ###

#### 代码 ####

**Parent.vue（父组件（顶层组件））**

<template>
      <div class="outer">
        <h3>父组件</h3>
        <div>myData:{
       { myData }}</div>
        <child @changeData="changeMyData"></child>
      </div>
    </template>
    <script>
    import Child from "./Child";
    export default {
      name: 'Parent',
      components: {Child},
      data() {
        return {
          myData: 100
        };
      },
      methods: {
        changeMyData(val) {
          this.myData = val;
        }
      }
    }
    </script>
    
    <style scoped>
    .outer {
      margin: 20px;
      border: 2px solid red;
      padding: 20px;
    }
    </style>

**Child.vue（子组件（中间组件））**

子组件作为父组件和孙组件的传递中介，在儿子组件中给孙子组件添加v-on="$listeners"，这样父组件才能接收到孙组件的数据。

<template>
      <div class="outer">
        <h3>子组件</h3>
        <grand-child v-on="$listeners"></grand-child>
      </div>
    </template>
    <script>
    import GrandChild from "./GrandChild";
    export default {
      components: {GrandChild}
    }
    </script>
    
    <style scoped>
    .outer {
      margin: 20px;
      border: 2px solid blue;
      padding: 20px;
    }
    </style>

**GrandChild.vue（孙组件（最底层组件））**

<template>
      <div class="outer">
        <h3>孙组件</h3>
        <input v-model="data1" @input="edit"/>
      </div>
    </template>
    <script>
    export default {
      name: "GrandChild",
      data() {
        return {
          data1: 200,
        }
      },
      methods: {
        edit() {
          // 发送事件
          this.$emit("changeData", this.data1);
        }
      }
    }
    </script>
    
    <style scoped>
    .outer {
      margin: 20px;
      border: 2px solid green;
      padding: 20px;
    }
    </style>

**路由（store/index.js）**

#### 测试 ####

**测试1：访问**

访问：[http://localhost:8080/\#/parent][http_localhost_8080_parent]

![d0b4e767a7ad4f54aef041f8d4b10dd5.png][]

一开始，父组件和孙组件的数据不一致，都是初始数据。

**测试2：孙组件动态传值给父组件**

**![b544ac68fefa40e4b84f37f77003c5f0.gif][]**

## 实际应用 ##

### 应用1：封装组件 ###

element-ui开发的后台项目中，大量使用到了el-table和el-pagination做分页数据展示，所以我封装一个自定义组件page-table：

这样做的副作用是：引用page-table的地方无法使用el-table和属性和事件。

解决方案：在el-table使用的地方加上v-on="$listeners"和v-bind="$attrs"，这样使用page-table的地方可使用所有el-table的属性和事件。

### 应用2：兄弟组件传值到最外层 ###

有时候会碰到多个兄弟组件传递参数到最外层，如有B组件包含C1和C2,都需要和A交互，定义2个props使用v-bind即可。

<template>
      <div class="page-table">
        <div class="wrapper">
          <el-table
              ref="elTable"
              v-bind="table1Props"
              :data="tableData">
            <slot/>
          </el-table>
          <el-table
              ref="elTable"
              v-bind="table2Props"
              :data="tableData">
            <slot/>
          </el-table>
          <div style="margin-top: 16px;overflow: hidden">
            <el-pagination
                class="page"
                :current-page="currentPage"
                layout="total, prev, pager, next, jumper"
                :total="total"
                @current-change="handleCurrentChange"/>
          </div>
        </div>
      </div>
    </template>
    <script>
      export default {
        props: {
          table1Props: Object,
          table2Props: Object,
        }
    </script>

## 其他网址 ##

[Vue使用$attrs与$listeners实现多层嵌套传递 - 掘金][Vue_attrs_listeners_ -]

[vue $attrs的使用\_随意花的博客-CSDN博客\_$attrs][vue _attrs_-CSDN_attrs]

[Vue--_attrs_ _listeners--_IT_-CSDN]: https://knife.blog.csdn.net/article/details/122374490
[API _ Vue.js]: https://cn.vuejs.org/v2/api/#vm-attrs
[7ce5910a40364ef6a51fafb8aa20b4df.png]: https://img-blog.csdnimg.cn/7ce5910a40364ef6a51fafb8aa20b4df.png
[http_localhost_8080_parent]: http://localhost:8080/#/parent
[f2fd272ea919440987d85b9e8d32c36e.png]: https://img-blog.csdnimg.cn/f2fd272ea919440987d85b9e8d32c36e.png
[9148f589e59f4d48b79643d8dac3e904.gif]: https://img-blog.csdnimg.cn/9148f589e59f4d48b79643d8dac3e904.gif
[d0b4e767a7ad4f54aef041f8d4b10dd5.png]: https://img-blog.csdnimg.cn/d0b4e767a7ad4f54aef041f8d4b10dd5.png
[b544ac68fefa40e4b84f37f77003c5f0.gif]: https://img-blog.csdnimg.cn/b544ac68fefa40e4b84f37f77003c5f0.gif
[Vue_attrs_listeners_ -]: https://juejin.cn/post/6844903828098138120
[vue _attrs_-CSDN_attrs]: https://blog.csdn.net/weixin_40509884/article/details/105658377