请教vue的属性方法和事件调用有什么区别？

Question

假设有以下这个例子：

1、父组件

<template>
    <test1 :handleChange="onChange" />
    <test2 @handleChange="onChange" />
</template>
<script>
...
methods: {
    onChange(data) {...}
}
...
</script>

2、test1 组件

<template>
    <div @click="onChange"></div>
</template>
<script>
...
props: {
    handleChange: Function
},
methods: {
    onChange() {
        this.handleChange(123)
    }
}
...
</script>

3、test2 组件

<template>
    <div @click="onChange"></div>
</template>
<script>
...
methods: {
    onChange() {
        this.$emit("handleChange", 123)
    }
}
...
</script>

问题：

test1 组件和 test2 组件，都向外部委派了事件，但是一个是用的属性方法的形式，一个是用的委派事件的形式。父组件进行调用的时候，发现它俩都能执行相同的事儿。
请问它们的区别是什么呢？

---

我目前知道的区别是：
1、使用属性的形式，相当于把外部的方法传递给子组件来进行调用；而委派事件的方式，是子组件向外部报告一个事件，由外部来进行接收执行。

Answer 1

从执行结果来看，区别不大；从代码架构层面来看，比较推荐“事件-侦听”机制。因为后者有助于父子组件之间解耦，即父组件不要求一定是这个子组件，子组件也不要求父组件一定要传处理函数不然就报错。

Answer 2

第一个是典型的父子数据传递。优点就是可以很方便的看到函数调用关系。缺点是如果组件不是父子关系，那么就需要一层层传递下去，很难受。另外耦合性比较严重。父子组件不满足”最小知识原则“。 不过原则这种东西，可不是必须要遵守的，比如jquery的prop方法既可以获取属性又可以设置数据，就不满足单一职责原则。

第二个则是发布订阅者模式。 更有利于解耦。另外也不要求接受事件和发送事件的组件是父子关系。缺点就是一旦乱用这种模式，会造成很严重的混乱， 很容易理不清系统的流程和数据走向。

Answer 3

请使用第二种, 解耦是组件设计必备的, 第一个可用性不高

Answer 4

组件的设计是有一定原则的。

这里的父子组件，父组件自己的方法，最好是控制在父组件里，方便阅读和可控。
另外，父组件的方法在父组件里执行，这样响应方法里基本都是对父组件的属性操作，放子组件里不能操作父组件里的属性。