传方法给子组件和子组件触发事件有什么不同？

Question

父组件传一个函数给子组件调用
父组件监听事件，子组件触发该事件

这两种方法有什么不同

https://codesandbox.io/s/vue-...

<template>
    <bar @some-event="eventHandler" :do-some-thing="doSomeThing"></bar>
</template>

<script>

    import Bar from "./bar";

    export default {
        name: "foo",
        components: {Bar},
        methods: {
            doSomeThing(message) {
                console.log(message);
            },
            eventHandler(message) {
                console.log(message);
            }
        },
    }
</script>

<template>
    <div>
        <button @click="runSomething" >prop function</button>
        <button @click="triggerEvent">trigger event</button>
    </div>
</template>

<script>
    export default {
        name: "bar",
        props: {
            doSomeThing: {
                type: Function,
                default: ()=>{}
            },
        },
        methods: {
            runSomething(){
                this.doSomeThing('function');
            },
            triggerEvent() {
                this.$emit('some-event', 'event')
            }
        },
    }
</script>

Answer 1

父组件传一个函数给子组件调用
--- 这是回调
父组件监听事件，子组件触发该事件
--- 这是发布订阅者模式