vue 组件传值之 $attrs、$listeners

vue 组件传值之 $attrs、$listeners

• vue的通信方法常用的有，父传子 props， 子传父 通过绑定@事件，子组件$emit 传值，也可以父组件给子组件props传递一个函数，子组件调用函数，利用参数传值。
• 其他的还有vuex集中状态管理，eventBus也就是事件的全局$emit, $on 来抛发事件传值
• 以及接下来的 $attrs、$listeners 。其实这两个属性的模式，也就是父组件A把很多数据传给子组件B，子组件B利用$attrs收集起来，然后可以利用v-bind="$attrs"在传给B的子组件C（也就是A组件的孙组件），这样就不用一个一个属性去传了。至于$listeners 与$attrs类似，$listeners 传递的是事件，在子组件以及孙组件通过$emit触发事件。

$attrs

官方解释：

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

简言之：

接收除了props声明外的所有绑定属性（class、style除外）

//parent组件
<template>
	<div>
        <Son :name='name' :age='age'/>
    </div>
</template>
<script>
	export default {
        data() {
            return {
                name: 'Eric',
                age: '20'
            }
        }
    }
</script>

//Son组件
<template>
	<div>
        //此时Son组件把从父组件传来的数据，在传给孙组件
        <GrandSon v-bind='$attrs'/>
    </div>
</template>
<script>
	export default {
        props: ['name'],
        mounted() {
            //父组件共传来连个值，一个name， 一个age，由于name被props接收了，故$attrs 只有age属性
            console.log(this.$attrs) //{age: '20'}
        }
    }
</script>

//GrandSon组件
<template>
	<div>
        这是孙组件
    </div>
</template>
<script>
	export default {
        mounted() {
            //这样父祖组件就把数据传到了孙组件
            console.log(this.$attrs) // {age: '20'}
        }
    }
</script>

$listeners

官方解释：

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

简言之：

接收除了带有.native事件修饰符的所有事件监听器

//parent组件
<template>
	<div>
        <Son @eventOne='eventHandler' @click.native='clickHandler'/>
    </div>
</template>
<script>
	export default {
        methods: {
            eventHandler() {
                console.log('触发了Parent中的eventHandler')
            },
            clickHandler() {
                console.log('触发了Parent中的clickHandler')
            }
        }
    }
</script>

//Son组件
<template>
	<div>
        //此时Son组件把从父组件传来的监听器，在传给孙组件
        <GrandSon v-on='$listerners'/>
    </div>
</template>
<script>
	export default {
        mounted() {
            //父组件监听了两个事件，一个eventOne， 一个click，由于click被native修饰了，故$listerners 只有eventOne事件
            console.log(this.$listerners) //{eventOne: fn}
            this.$emit('eventOne') //可以触发Parent组件中的eventHandler函数
        }
    }
</script>

//GrandSon组件
<template>
	<div>
        这是孙组件
    </div>
</template>
<script>
	export default {
        mounted() {
            //这样孙组件通过emit触发Parent组件中的监听函数
            console.log(this.$listerners) // {eventOne: fn}
            this.$emit('eventOne') //可以触发Parent组件中的eventHandler函数
        }
    }
</script>