vue中v-bind=“$attrs“和v-on=“$listeners“的含义

https://blog.csdn.net/weixin_40825228/article/details/114700505

假定自定义了一个组件 ComponentB, props 接收了name, age两个参数, ComponentA在调用ComponentB时这么调用:

<componentB
  :name="_name"
  :age="_age"
  :address="_address"
  :phone="_phone"
  @playBall="_playBall"
  @study="_study"
>

而ComponentB又调用了ComponentC, 若想在ComponentC获取ComponentA传输过来的没被ComponentB接收的非props数据,则组件ComponentB可以这么写:

<template>
  <div v-bind="$attrs" v-on="$listeners"></div>
  <componentC />
</template>
<script>
export default {
   indeterminate: true,
   props: {
     name,
     age
   }

则在ComponentC中,可以通过vm.listeners获取祖先节点的methods,栗子:

<template>
</template>
<script>
export default {
  mounted () {
    // 访问ComponentA传入的`phone`, ComponentB的props并未接收
    console.log(this.$attrs.phone)
    // 触发ComponentA绑定`study`事件, 并非ComponentB emit的
    this.$emit('study')
  }
}