总结

v-bind="[$attrs, $props]"， v-on="$listeners"，v-bind="$attrs"，v-bind="$props" 使用情景可以总结为：组件隔代通讯

v-bind=“$attrs”

主要用于组件之间的隔代传值。例如有：父组件A，子组件B，孙组件C 三个组件，在A组件中传值给C，可直接在B中的C上设置v-bind=“$attrs”，然后在C组件中用prop接收，此时就直接把值传给了C。

// 组件A：
<template>
  <bCom msg='123'/>
</template>

// 组件B：
<template>
  <cCom v-bind="$attrs"/>
</template>

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

v-bind="$props"用法

中间组件B接收还是要接收的，但是标签上的属性绑定可以省掉了

// 组件A：
<template>
  <bCom :msg='msg' :sex='sex' />
</template>
data() {
   return {
     msg: 'Hi',
     sex: 'man'
 };

// 组件B：
<template>
  <cCom  v-bind="$props"/>
</template>
props: ['msg', 'sex'],

// 组件C：
<template>
  <div>A传递过来的值:{{msg}}</div>
  <div>A传递过来的值:{{sex}}</div>
</template>
<script>
export default {
  name: 'cCom',
  props: ['msg', 'sex'],
}
</script>

v-on="$listeners"用法

1、组件嵌套时，省写emit

例如有 父组件A，子组件B，孙组件C 三个组件；
如果C传递信息给B则可直接使用$emit，如果是C向A传递信息还使用$emit，
则就需要C先$emit给B，B再$emit给A，这种方式比较繁琐，则此时可以使用v-on="$listeners"来满足当前需求。
// 组件A：
<template>
  <bCom @Msg='Msg'/>
</template>
methods:{
  Msg(val){
    console.log(val) //123
  }
}

// 组件B：
<template>
  <cCom v-on="$listeners"/>
</template>

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