vue父子组件通信，props和自定义事件

Question

<div id="counter-event-example">
  <p>{{ total }}</p>
  <button-counter v-on:increment="incrementTotal"></button-counter>
  <button-counter v-on:increment="incrementTotal"></button-counter>
</div>

Vue.component('button-counter', {
  template: '<button v-on:click="incrementCounter">{{ counter }}</button>',
  data: function () {
    return {
      counter: 0
    }
  },
  methods: {
    incrementCounter: function () {
      this.counter += 1
      this.$emit('increment')
    }
  },
})

new Vue({
  el: '#counter-event-example',
  data: {
    total: 0
  },
  methods: {
    incrementTotal: function () {
      this.total += 1
    }
  }
})

?这上面的是vue官方文档给出的父子通信组件的例子，是通过自定义事件实现的。
?我通过props 传function方式实现相同的功能下面是代码部分

<div id="counter-event-example">
  <p>{{ total }}</p>
  <button-counter :increment="incrementTotal"></button-counter>
  <button-counter :increment="incrementTotal"></button-counter>
</div>

Vue.component('button-counter', {
  template: '<button v-on:click="incrementCounter">{{ counter }}</button>',
  props:{
     increment:{
         type:Function
         required:true
     }
  }
  data: function () {
    return {
      counter: 0
    }
  },
  methods: {
    incrementCounter: function () {
      this.counter += 1
      //this.$emit('increment')
      this.increment();
    }
  },
})

new Vue({
  el: '#counter-event-example',
  data: {
    total: 0
  },
  methods: {
    incrementTotal: function () {
      this.total += 1
    }
  }
})

利用props特性一样可以实现vue父子组件的通信，在这里我想问问props实现和自定义事件实现都能实现那么在项目开发的时候该选择哪种方式呢，它们各有什么特点呢？我自己知道的就是通过自定义事件实现的配合vue-devtool工具方便调试，还有其他的吗？

Answer 1

文档原话

组件设计初衷就是要配合使用的，最常见的就是形成父子组件的关系：组件 A 在它的模板中使用了组件 B。它们之间必然需要相互通信：父组件可能要给子组件下发数据，子组件则可能要将它内部发生的事情告知父组件。然而，通过一个良好定义的接口来尽可能将父子组件解耦也是很重要的。这保证了每个组件的代码可以在相对隔离的环境中书写和理解，从而提高了其可维护性和复用性。
在 Vue 中，父子组件的关系可以总结为 prop 向下传递，事件向上传递。父组件通过 prop 给子组件下发数据，子组件通过事件给父组件发送消息。看看它们是怎么工作的。

1. 这是作者设计的思想；
2. 每个 api各司其职，props管数据通信，$on和 $emit管事件通信；
3. 类似的问题可能还有，处理数据可以在 computed实现 也可以在 methods来实现，哪个好？
4. 都是默默的遵循这个做法，或者设计思路；有自己的想法是好的，未来你可以用在自己造的框架上。

Answer 2

谢邀。你这种写法也倒是可以。不过我一般不这么用(个人喜好)
但是其实第一种写法，@increment="incrementTotal",既可以拿到组件返回值，也可以当做函数使用。
子组件this.$emit('increment',this.counter)
父组件

methods:{
    increment(param){
        this.counter=param;
        ...
    }
}
上面是个人用法。

Answer 3

这样可能会造成 this 作用域问题。你体会一下

Answer 4

其实是个人习惯问题，都可以，我习惯用this.emit('parentFn', params)，提醒我是调用的父级组件的一个方法，事实上是可以把父级的一个方法当作props函数类型变量传递给子组件的

props:{
 propA:{
  type: Function
 }
}

官网有说明：https://cn.vuejs.org/v2/guide...

Answer 5

分享一个Vue.js 2 的全家桶系列教程：

1.vue.js 2 入门与提高 http://xc.hubwiz.com/course/5...
2.vuex 2 入门与提高 http://xc.hubwiz.com/course/5...
3.vue-router 2 入门与提高 http://xc.hubwiz.com/course/5...
4.vue.js 2 工程化实践 http://xc.hubwiz.com/course/5...

Answer 6

其实吧。在满足业务需求的情况下，不存在那种方法好不好，昨天还跟同事讨论架构员和业务员有什么本质的区别，有一点就是架构的人对实际业务的考量程度不同，应该说，架构人员对业务逻辑的支持度没那么严格，也就存在一个东西有多个方式可以解决，架构人员考虑的是整个框架逻辑的风格，规范和最大化的去支持各种实现，就对于你这个问题，我又看了一遍文档，作者提到了其中一个概念解耦，你说解耦有用吗，对于你的业务，一点用都没有，你自己都没想过如何控制耦合度吧，但是人家不能因为有了自定义事件，就禁止props传入事件，没有这个道理的， 如果你在架构自定义事件的时候去考虑props里面有相关实现的话，这个框架就写不完了，也写不下去了，好的框架是包容性的，当然自定义事件也有自定义事件的用途，官网上就有好几个特殊的用途，所以不要拿你的业务去考量一整个框架的思考， 写的比较繁琐，欢迎讨论