vue inheritAttrs、$attrs和$listeners使用 跨级组件传值

inheritAttrs: false, // 默认是将非props属性放到组件标签最外层，false不放最外层

index.vue

<template>
  <div class="dashboard-container">
    <Son num="999" abc="123" 
    @fn="fatherFn"
    @click="fatherFn" />
  </div>
</template>

<script>
import Son from './components/son'
export default {
  components: {
    Son
  },
  methods: {
    fatherFn () {
      console.log('fatherFn')
    }
  }
}
</script>

son.vue

<template>
  <div>
    <!-- // inheritAttrs: false, //
    默认是将非props属性放到组件标签最外层，false不放最外层 //
    $attrs:非props传参,没有使用props接收的参数 //
    $listeners:接收所有的子组件标签上绑定的方法 //
    v-on=$listeners:将所有的方法绑定到相应标签上 {a:()=>{},b:()=>{}} //
    v-bind="{a:1,b:2}" :a="1" :b="2" -->
    <div class="son">我是子组件---{{ $attrs }}</div>
    <div v-on="$listeners" @click="$listeners.click" @fn="$listeners.fn">
      <div v-on="$listeners">
        <!-- <img alt="" :src="$attrs.src"> -->
        <img alt="" v-bind="$attrs" />
        <Sonson v-bind="$attrs" v-on="$listeners" />
      </div>
    </div>
  </div>
</template>
<script>
import Sonson from './sonson.vue'
export default {
  components: {
    Sonson
  },

  props: ['num']
}
</script>
<style></style>

sonson.vue

<template>
  <div class="sonson">孙组件---{{ $attrs }}</div>
</template>
<script>
export default {}
</script>
<style></style>

总结

• 跨级组件传值attrs与listeners
  • attrs与listeners
    • $attrs:接收父组件传入的非props属性（没有通过props接收的属性），
      • 它是一个对象，能接收到所有的非props属性
      • 如果要全部绑定应用到某标签 v-bind="$attrs"
    • inheritAttrs：默认是将非props属性放到组件标签最外层，false不放最外层(了解)
    • $listeners:接收父组件在子组件标签上绑定的所有方法，它也是一个对象
      • 如果它要将所有方法绑定某标签 v-on="$listeners"