vm.$listeners

子组件调用父组件：
父组件<Child @customClick="handleClick" />
子组件<button @click="$emit('customClick')">ChildClick</button>

如果传递的方法很多，在父组件引用子组件就会非常冗长。

1、父组件向子组件传递方法存在$listeners对象中。

// 父组件
<template>
    <div>
        ParentPage
        <button @click="handleClick">ParentClick</button>
        <Child
            @customClick="handleClick" />
    </div>
</template>

<script>
    import Child from './Child'
    export default {
        name: 'ParentPage',

        components: {
            Child
        },

        methods: {
            handleClick () {
                alert('hello')
            }
        }
    }
</script>

// 子组件
<template>
    <div>
        ChildPage
        <!-- <button @click="$emit('customClick')">ChildClick</button> -->
        <button @click="$listeners.customClick">ChildClick</button>
    </div>
</template>

<script>
    import SubChild from './SubChild.vue'
    export default {
        name: 'ChildPage',
        components: {
            SubChild
        },
        data () {
            return {}
        }
    }
</script>

2、多层组件引用时，子组件传递父组件方法v-on="$listeners"至子子组件

// 子组件
<template>
    <div>
        ChildPage
        <!-- <button @click="$emit('customClick')">ChildClick</button> -->
        <button @click="$listeners.customClick">ChildClick</button>
        <SubChild
            v-on="$listeners" />
    </div>
</template>

<script>
    import SubChild from './SubChild.vue'
    export default {
        name: 'ChildPage',
        components: {
            SubChild
        },
        data () {
            return {}
        }
    }
</script>

// 子子组件
<template>
    <div>
        SubChildPage
        <button @click="$listeners.customClick">SubChildClick</button>
    </div>
</template>

<script>
    export default {
        name: 'SubChildPage',
        data () {
            return {}
        }
    }
</script>