$attr与$listeners的学习

$ attrs和$ listeners是跨多层次组件传值的一种方式。

$attrs

用来继承上级组件的属性
不包括在当前组件里面定义的props属性，也就是说如果用了$attrs的组件里，用props接受了属性之后，该属性就不再向下传递了

$listeners

用来监听。$emit发送来的自定义事件，以及属性。

根组件

<template>
	<div>
		<fieldset>
			<legend>Root</legend>
			{{ formSonData }}
			<parent
				:rootdata1="rootdata1"
				:rootdata2="rootdata2"
				v-on:sonSend="recieveSon"
			></parent>
		</fieldset>
	</div>
</template>

<script>
import parent from './parent'
export default {
	components: {
		parent
	},
	name: 'Root',
	data() {
		return {
			rootdata1: '这是来自root的1',
			rootdata2: '这是来自root的2',
			formSonData: ''
		}
	},
	methods: {
		recieveSon(data) {
			this.formSonData = data
		}
	}
}
</script>

父组件

<template>
	<div>
		<fieldset>
			<legend>parent</legend>
			<h2>{{ parentdata }}</h2>
			{{ rootdata1 }}
			<son v-bind="$attrs" v-on="$listeners"></son>
		</fieldset>
	</div>
</template>

<script>
import son from './son'
export default {
	props: ['rootdata1'],
	name: 'parent',
	components: {
		son
	},
	data() {
		return {
			parentdata: '这里是父组件的信息'
		}
	},
	methods: {}
}
</script>

儿子组件

<template>
	<div>
		<fieldset>
			<legend>son</legend>
			<p>{{ rootdata1 }}</p>
			<p>{{ rootdata2 }}</p>
			<button @click="send">发送</button>
		</fieldset>
	</div>
</template>

<script>
export default {
	name: 'son',
	props: ['rootdata1', 'rootdata2'],
	data() {
		return {
			sondata: '这是来自son的'
		}
	},
	methods: {
		send() {
			this.$emit('sonSend', this.sondata)
		}
	}
}
</script>

root组件向下传递了两个属性，但是parent用props接收了一个，该属性便不再向下传递了。所以$attrs传递的属性不包括在当前组件里面定义的props属性。如果需要只接受props里的属性，则可以将v-bind=’ $ attrs’改为v-bind=’ $props’, $props是只包括props里属性。