vue属性方法调用：与事件调用@ 的区别

搞了一段时间vue,有时候看到第三方组建用的属性方法外抛事件，自己写的时候，基本用的是事件调用这种方式，今天有时间，就整理一下。我们看下例子。

1、父组件

  <template>
    <a-test1 :handleChange="onChange" />
    <a-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>

从执行结果来看，区别不大，都能达到回调的目的。
从代码架构层面来看，比较推荐第二种test2的方式，即 “事件-侦听”机制。因为后者有助于父子组件之间解耦，即父组件不要求一定是这个子组件，子组件也不要求父组件一定要传处理函数不然就报错。
但是订阅者模式也有缺点，就是一旦乱用这种模式，会造成很严重的混乱， 很容易理不清系统的流程和数据走向。

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