请教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方法既可以获取属性又可以设置数据，就不满足单一职责原则。

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