四、Vue 组件通信方式之$attrs 、$listener

$attrs 、$listener
1、$attrs
用来接收父作用域中不作为prop被识别的attribute属性，并且可以通过v-bind="$attrs"传入内部组件–在创建高级别的组件时非常有用。
如果创建组件，要接收一堆参数时，通过props,需要声明一堆。如果这些pros还有一些需要往更深层次的子组件传递，将会比较麻烦。
使用$attrs，不需要任何声明，直接通过$attrs.params1、$attrs.params2、$attrs.params3。。。就可以使用。

// 父组件A
<template>
  <div class="compA">
    <h3>这是组件A</h3>
    <input type="text" v-model="msg" />
    <p>收到来自{{ comp }}的消息：{{ msgComp }}</p>
    <CompB :msgFromA="msg" :name="name" @keyup="receive" />  <!--监听子孙组件的keyup事件，将msg传递给子孙组件-->
  </div>
</template>
<script>
import CompB from './compB'
export default {
  name: 'CompA',
  data() {
    return {
      msg: '',
      msgComp : '',
      comp: '',
      name:'这是name值'
    }
  },
  components: {
    CompB,
  },
  methods: {
    receive(e) { // 监听子孙组件keyup事件的回调，并将keyup所在input输入框的值赋值给messageFromComp
      this.comp = e.target.name
      this.msgComp = e.target.value
    },
  },
}
</script>

子组件须加上v-bind=“$attrs”,孙组件才能接收上数据。另外 不想继承所有父组件的内容,同时也不在组件根元素dom上显示属性就加上inheritAttrs: false,为true时是继承所有父组件的值,与data同级别。注意，不想传递给孙组件某个属性，需要子组件用props接收。

// 子组件B
<template>
  <div class="compb">
    <h4>这是子组件B</h4>
    <input name="compB" type="text" v-model="msg" v-on="$listeners" />  <!--将A组件keyup的监听回调绑在该input上-->
    <p>收到来自A组件的消息：{{ $attrs.msgFromA }}</p>
    <CompC v-bind="$attrs" v-on="$listeners" />
     <!--将A组件keyup的监听回调继续传递给C组件，将A组件传递的attrs继续传递给C组件-->
  </div>
</template>
<script>
import CompC from './compC'
export default {
  name: 'CompB',
  components: {
    CompC,
  },
  inheritAttrs: true,
  //父组件传递了两个值，一个被props接收name，故$attr只有msgFromA
  props:['name'],
  data() {
    return {
      msg: '',
    }
  },
}
</script>

孙组件可以通过$attrs.msgFromA获取到组件A的msg。另外通过props来接收组件A 的值，

// 孙组件C
<template>
  <div class="compc">
    <h5>这是孙组件C</h5>
    <input name="compC" type="text" v-model="msg" v-on="$listeners" /> <!--将A组件keyup的监听回调绑在该input上-->
    <p>收到来自A组件的消息1：{{ msgFromA }}</p>
   //或
    <p>收到来自A组件的消息2：{{ $attrs.msgFromA }}</p>
  </div>
</template>
<script>
export default {
  name: 'Compc',
  data() {
    return {
      msg: '',
    }
  },
  inheritAttrs: false,
  props:{
  msgFromA :String
  }
}
</script>

2、 $listeners
包含父作用域中的(不含.native修饰器)v-on事件监听器。可以通过v-on=“$listeners”传入内部组件——在创建多层次的组件时非常有用，这里在传递是与$attrs非常类似。
就是接收除了带有.native事件修饰符的所有事件的监听器。

//父组件
<template>
	<div>
		<Son @funOne="getInfo" @funTwo="eventHander" @click.native="clickModule"></Son>
	</div>
</template>
<script>
	import Son from './Son ';
	export default{
		components: {
		    Son,
		},
		methods:{
			getInfo(){},
			eventHander(){},
			clickModule(){},
		}
	}
</script>
//
//子组件
<template>
	<div>
	//子组件通过v-on="$listerners"把父组件传递来的监听器，传给孙组件
		<Grandson v-on="$listerners"></Grandson>
	</div>
</template>
<script>
	import Grandson from './Grandson';
	export default{
		components: {
		    Grandson,
		},
		mounted(){
		//console.log(this.$listerners)//{getInfo:fn,eventHander:fn}	
		},
		methods:{
			setData(){
				this.$emit('funOne',"这是可以触发传递给父组件的值")
			}
		}
	}
</script>

//孙组件
//子组件
<template>
	<div>
		这是孙组件块
	</div>
</template>
<script>
	export default{
		mounted(){
		//console.log(this.$listerners)//{getInfo:fn,eventHander:fn}	
		},
		methods:{
			setData(){
				//同样可以触发给父组件
				this.$emit('funOne',"这是可以触发传递给父组件的值")
			}
		}
	}
</script>