vue组件深层次传值方式-$attrs/$listeners

• $attrs

包含了父作用域中不作为 prop 被识别 (且获取) 的特性绑定 (class 和 style 除外)。当一个组件没有声明任何 prop 时，这里会包含所有父作用域的绑定 (class 和 style 除外)，并且可以通过 v-bind="$attrs"传入内部组件——在创建高级别的组件时非常有用。

注意：父组件给子组件传值可以通过v-bind="$attrs"传入内部组件，内部子组件无需在prop声明
-子组件接收的值是以对象形式存在的，直接{{$attrs}}进行使用，也可以通过this.$attrs打印出来

• $listeners

包含了父作用域中的 (不含 .native 修饰器的) v-on 事件监听器。它可以通过v-on="$listeners"传入内部组件——在创建更高层次的组件时非常有用。

注意：父作用域（直系父级以及以上层级）上的所有订阅的事件都可在子组件中被触发，触发方式可以是$emit(事件名，参数)或者是this.$listeners.事件名（参数） ，前提是必须通过v-on="$listeners"传入的。

//home组件
<template>
    <div>
   		 <!-- 通过 :child1Info="child1" 方式向子组件传值 -->
        <Child1
        :child1Info="child1"
        :child2Info="child2"
        :child3Info="child3"
        v-on:test1="onTest1"
        v-on:test2="onTest2"
        v-on:test3="onTest3">
        </Child1>
    </div>
</template>
<script>
import Child1 from '../../components/child1';
export default {
    data() {
        return {
            child1:"child1",
            child2:"child2",
            child3:"child3"
        };
    },
    components: { Child1 },
    methods: {
        onTest1(msg) {
            console.log('test1 running...',msg);
        },
        onTest2(msg) {
            console.log('test2 running',msg);
        },
        onTest3(msg){
          console.log('test3 running',msg)
        }
    }
};
</script>

//child1组件
<template>
  <div class="child-1">
    <p>在子组件child1当中:</p>
    <p>props-child1Info: {{child1Info}}</p>
    <p>$attrs: {{$attrs}}</p>
    <hr>
    <!-- Child2组件中能直接触发test的原因在于 B组件调用C组件时 使用 v-on 绑定了$listeners 属性 -->
    <!-- 通过v-bind 绑定$attrs属性，Child2组件可以直接获取到A组件中传递下来的props（除了child1组件中props声明的） -->
    <Child2 v-bind="$attrs" :test3Info="test3" v-on="$listeners"></Child2>
  </div>
</template>

<script>
import Child2 from './child2';
  export default {
    props: ['child1Info'],//父组件给子组件传值，这是普通的接参方式
    data() {
      return {
        test3:'test3'
      };
    },
    components: { Child2 },
    mounted() {
      //普通的子组件给父组件传值
      this.$listeners.test1('test')；// test1 running... test
      //通过this.$attrs.自定义属性名 的方式获取父组件传递的值
      console.log(this.$attrs.child2Info) // child2
    }
  }
</script>

//child2组件
<template>
    <div class="child-2">
        <p>在子组件child2当中:</p>
        <p>props-child2Info: {{child2Info}}</p>
        <p> $attrs 的值: {{$attrs}}</p>
        <hr>
        <Child3 v-bind="$attrs" v-on="$listeners"></Child3>
    </div>
</template>
<script>
  import Child3 from './child3';
  export default {
      props: ['child2Info'],//通过上一层父组件获取
      components: { Child3 },
      data() {
          return {};
      },
      mounted() {
      //this.$emit('test2','哈哈54345') 既可以触发父组件上订阅的事件也可以通过 this.$listeners.test1('test53453')触发父组件或者更高层次组件订阅的事件
        this.$emit('test2','哈哈54345');
        this.$listeners.test1('test53453')
      }
  };
</script>

//child3组件
<template>
    <div class="child-3">
        <p>在子组件child3当中:</p>
        <p>props-child3Info: {{child3Info}}</p>
        <p> $attrs 的值: {{$attrs}}</p>
        <hr>
    </div>
</template>
<script>
export default {
    props: ['child3Info'],
    data() {
        return {};
    },
    mounted() {
        this.$emit('test1','哈哈');
    }
};
</script>