v-bind=“$props“、v-bind=“$attrs“、v-on=“listeners“（props值传递、事件传递）

---

前言

浏览掘金的时候，偶然看到一篇文章提到了v-bind="props"和v-bind="attrs"这些知识点，因为之前没有接触过，所以查阅了相关资料，进行了一些学习，以下是我自己的一些理解

---

一、v-bind=“$props"、v-bind="$attrs”、v-on="listeners"是什么？

1. v-bind="$props" 和 $props

v-bind="$props"：

可以将自身接收到的所有props传递给它的子组件，子组件需要在其props:{} 中定义要接受的参数名。

$props：

当前组件接收到的 props 对象。可以通过 v-bind="$props"传入内部组件，也可以通过vm.$props[name]的形式去获取。

2.v-bind="$attrs" 和 $attrs

v-bind="$attrs"：

可以将自身接收到的所有非props的特性(class和style除外)传递给它的子组件。（子组件添加inheritAttrs: false，避免父作用域的不被认作props的特性绑定应用在子组件的根元素上）
注：inheritAttrs: false 属性解释
有关该属性的解释在我的另一篇文章中有所解释：https://blog.csdn.net/qq_44747461/article/details/108811180

$attrs：

包含了父作用域中不作为 prop 被识别 (且获取) 的特性绑定 (class 和 style 除外)。当一个组件没有声明任何 prop 时，这里会包含所有父作用域的绑定 (class 和 style 除外)，并且可以通过 v-bind="$attrs"传入内部组件，也可以通过vm.$attrs[name]的形式获取。

3.v-on=“listeners”

v-on=“listeners”:

可以将父组件绑定的事件传递给子组件，子组件可以通过this.$emit(eventName)触发父组件绑定的事件

vm.$listeners

包含了父作用域中的 (不含 .native 修饰器的) v-on 事件监听器。

二、代码演示

1.index页面

<template>
  <div>
    <h1>$props / $attrs / $listeners</h1>
    <my-parent
      sex="male"
      :name="name"
      :age="age"
      v-on:printName="printName"
      @printAge="printAge"
    ></my-parent>
  </div>
</template>
<script>
import myParent from "./components/parent.vue";
export default {
  name: "",
  components: { myParent },
  data() {
    return {
      name: "xxx",
      age: "18",
    };
  },
  methods: {
    printName(from,value) {
        console.log('打印姓名 ' + from + " " +value)
    },
    printAge(from,value) {
        console.log('打印年龄 ' + from + " " +value)
    },
  },
};
</script>

2.父组件页面

<template>
  <div class="parent">
    <h2>父组件</h2>
    <p>$props:组件上绑定的props属性:{{ $props }}</p>
    <my-child1 v-bind="$props" v-on="$listeners"></my-child1>
    <p>$attrs:组件上绑定的非props属性:{{ $attrs }}</p>
    <my-child2 v-bind="$attrs" v-on="$listeners"></my-child2>
  </div>
</template>
<script>
import myChild1 from "./child1";
import myChild2 from "./child2";
export default {
  name: "",
  components: { myChild1, myChild2 },
  props: ["name", "age"],
  //或者采取拓展运算符(...)的形式
  //此种方式可以避免代码冗余，不需要列举所有的props特性，也避免忘记修改增加props特性时同步更新此处的内容
  props:{
  	...myChild1.props;
  }
  mounted() {
    console.log(this.$listeners);
    this.$emit("printName", "父组件", this.$props["name"]);
    this.$emit("printAge", "父组件", this.$props["age"]);
  },
  data() {
    return {};
  },
  inheritAttrs:false
};
</script>
<style scoped lang='less'>
</style>

3.子组件1页面

<template>
  <div>
    <h3>子组件1 接收$props</h3>
    <p>父组件传递过来的姓名:{{name}}</p>
    <p>父组件传递过来的年龄:{{age}}</p>
  </div>
</template>
<script>
export default {
  name:'',
  props:['name','age'],
  mounted(){
    this.$emit('printName','子组件1',this.name + this.age);
  },
  data(){
    return {
       
    }
  }
}
</script>
<style scoped lang='less'>
</style>

4.子组件2页面

<template>
  <div>
    <h3>子组件2 接收$attrs</h3>
    <p>父组件传递过来的性别:{{ $attrs["sex"] }}</p>
    <p></p>
  </div>
</template>
<script>
export default {
  name: "",
  mounted() {
    this.$emit("printName",'子组件2',this.$attrs['sex']);
  },
  data() {
    return {};
  },
};
</script>
<style scoped lang='less'>
</style>

三：效果图

1.DOM结构展示

2.浏览器页面展示图

3.控制台打印