[JavaScript知识库]$attrs 和 $listeners

$attrs--继承所有的父组件属性（除了prop传递的属性、class 和 style ）

$listeners--属性，它是一个对象，里面包含了作用在这个组件上的所有监听器，你就可以配合?v-on="$listeners"?将所有的事件监听器指向这个组件的某个特定的子元素。

1、页面中引用Parent组件

<template>
  <div class="x-page">
     <Parent 
    address="上海浦东" 
    name="张三" 
    age="25" 
    class="my-parent" 
    @titleChange="titleChangeFn"> 
    </Parent>
  </div>
</template>

<script>
 import Parent from './Parent'
export default {
  name: "myPage", 
   methods: {
    titleChangeFn(){
      alert('我是 titleChangeFn ')
    }
   }
};
</script> 

2、Parent组件

<template>
  <div class="x-parent">
     <Child money="999" v-bind="$attrs" v-on="$listeners"></Child>
  </div>
</template>

<script>
 import Child from './Child'
export default {
  name: "Parent",
  props:{
    address:String
  },
  components: {
    Child
  }
};
</script> 

3、Child组件

<template>
  <div class="x-child" v-on:click="clickBlock">
     <div>{{$attrs.name}}</div>
     <div>{{$attrs.age}}</div>
     <div>{{$attrs.money}}</div>
      <div>{{$attrs.address}}</div>
  </div>
</template>

<script>
export default {
  name: "Child",
  methods: {
     clickBlock(){
       this.$emit('titleChange')
     }
  }
};
</script>

4、页面显示如下

?其中，$attrs.address不会显示内容，因为Parent组件中定义了address为props属性，因此，该属性不会被继承。

点击文字区域，会触发页面里面的方法，弹出?alert('我是 titleChangeFn ')