vue父子组件props传回调函数和子组件emit的区别

Question

1.父组件给子组件传回调函数过去，在子组件里把数据当参数传进去调用
和
2.子组件emit数据给父组件，在父组件中使用
有啥区别吗

感觉全部都能用第1种方式啊，为啥还要子组件emit这种方式

目前唯一能想到的 就是 第1种方式，子组件可以修改父组件传过来的方法，感觉不太好

PS: 在子组件尝试修改props的时候，另外发现个问题，比如
this.props.callback = function(){alert('改写了父组件方法')}，这样写是可以的改写掉的
但是如果

var a = this.props.callback
a = function(){alert('改写了父组件方法')}

这样是改不掉的，好奇怪，为啥？

这2个问题很困惑，小弟vue新手，还求大神赐教，感激不尽

Answer 1

感觉全部都能用第1种方式啊，为啥还要子组件emit这种方式

因为除了父子组件，还有兄弟组件，而event的方式只是也适用于父子组件而已。

这样是改不掉的，好奇怪，为啥？

此时只是a指向了this.props.callback，跟vue没有发生任何关系，重新赋值也只是把a指向了别的东西而已。

Answer 2

很简单，很多时候，我们的子组件只需要把值给上一层，不需要做其他的多余的事情。你当然可以把回调传进去……但是为了解耦父子组件，在做这个子组件的时候还是需要emit出来。
因为很多时候整个父组件的由无数小的子组件构成的。父组件统一处理逻辑比在子组件单个处理合理的多。。。
组件尽量做自己的事，别做别的组件的事。这样，维护也很方便。

Answer 3

1、emit没法兄弟组件通信，(event/事件总线的方式完全是两回事)

2、emit和props的区别是emit支持绑定参数

:click="clicked"


@click="clicked(id)"


// 父组件中
clicked(id) {
    console.log(id)
}

当然props的方式也能实现，但是id这个参数需要传递到子组件中去，然后从子组件中回调, 而emit不需要，更加的灵活