Vue 的$attrs及$listeners用法

Vue 的$attrs及$listeners

$attrs

场景：如果父传子有很多值，那么在子组件需要定义多个 props

解决：$attrs获取 子传父中未在 props 定义 的值

// 爷爷组件	:msg="msg"
<template>
    <div class="real-time-monitor">
            <map-vehicle :msg="msg"/>	// 父组件
    </div>
</template>

export default {
    name: 'RealTimeMonitor',
    data() {
        return {
            msg:100,
        }
    },
}

// 父组件	 v-bind="$attrs" 

<template>
    <div class="map-vehicle">
        <map-toolbar v-bind="$attrs"></map-toolbar>
    </div>
</template>

// 孙子组件 prop

<template><span>{{msg}}</span></template>

export default {
    props: {
        msg: {
            type: Number,
            default: false
        },
    },
}

$listeners

场景：子组件需要调用父组件的方法

解决：父组件的方法 可以通过 v-on="$listeners" 传入内部组件

// 爷爷组件 @change="change"
<template>
    <div class="real-time-monitor">
            <map-vehicle @change="change" />	// 父组件
    </div>
</template>

export default {
    name: 'RealTimeMonitor',
    methods: {
        change(){
            console.log('000');
        },
    },
}

// 父组件	 v-on="$listeners"

<template>
    <div class="map-vehicle">
        <map-toolbar v-on="$listeners"></map-toolbar>
    </div>
</template>

// 孙子组件 prop

<template><span>{{msg}}</span></template>

export default {
    mounted () {
        this.$listeners.change();	// 打印出来 000
    },
}