upload组件的钩子函数传递为什么使用的是v-bind而不是v-on？

Question

在看代码时，发现钩子函数传递使用是v-bind指令，而不是v-on，这是为什么啊？
这俩啥区别啊？

Answer 1

区别如下：

如果使用v-bind

<C :handleClick="handleClick"/>

// 在C中的调用是直接使用,在props中声明即可

<div @click="handleClick"></div>

如果是v-on

<C @handleClick="handleClick"/>

// 在C中的调用需要$emit，但不需要在props中声明

<div @click="$emit('handleClick')"></div>

Answer 2

取决于父子组件通信到底用 props 还是 emit，props 就是 v-bind，emit 就是 v-on。

用 props 的话子组件可以知道父组件执行该方法的返回值，这对于某些情况下很有用。

比如某个对话框组件，支持点击关闭按钮触发某个方法，如果方法返回值为 false 则阻止关闭；否则则正常关闭。这里用 props 就很简单：

<!-- 子组件 -->

<template>
    <dialog :visible="visible" @close="handleClose" />
</template>

<script lang="typescript">
export default class SubComponent extends Vue {
    @Prop({
        type: Function,
        default: () => () => {}
    })
    public readonly onClose!: Function;
    
    private visible = true;
    
    private handleClose() {
        let ret: any = this.onClose && this.onClose();
        if (ret !== false) {
            this.visible = false;
        }
    }
}
</scipt>

<!-- 父组件 -->

<template>
    <my-component :on-close="handleClose" />
</template>

<script lang="typescript">
export default class ParentComponent extends Vue {
    private handleClose() {
        return false;
    }
}
</scipt>

P.S. 用 emit 也不是不能实现这种需求，但就很繁琐，你可以自己实现看看。