vue父子组件通信问题

Question

1、通过props
子组件：
this.foo()
父组件：
<child-comp :foo="foo"></child-comp>

2、通过emit
子组件：
this.$emit('foo')
父组件：
<child-comp @foo="foo"></child-comp>

从react转的vue，请教下这两者区别在哪？为何需要emit？

Answer 1

在react中如果你想要在子组件中修改父组件的state,你可能会把父组件中的修改state的方法传入到子组件，然后你在子组件中调用父组件通过prop传进来的这个方法来修改。而在vue中推荐用emit，说白了其实就是EventEmitter,v-on是注册一个事件，就好比addEventListener,而emit就好比是事件触发即dispatchEvent，所以子组件修改父组件数据在react中是通过函数的直接调用来修改，vue中是通过事件机制来修改，当然vue中也是可以传递函数的prop的，只是用emit更为推荐

Answer 2

这些基本的文档都有描述、案例
props
https://cn.vuejs.org/v2/guide/components-custom-events.html

1、props-> :foo="foo" :foo是子组件在props中定义的接收参数类似data中定义一样 foo是父组件传入的参数
2、$emit 是触发事件

// 比如子组件要修改父组件的内容可以使用$emit
child.vue

this.$emit('updateval')

parent.vue

<child @updateval=""></child>  // 这里可以放methods中的事件 只要$emit触发 父组件就能监听到

Answer 3

首先 2 中的this.$emit('foo')放的位置不太对,这个方法的调用应该是写在子组件里的(child-comp)
关于props和emit 的用法可以试着看看我写的这篇文章,相信你看完之后就会很明白了
一个例子看懂Vue的组件通信

Answer 4

两种虽然字段名一致，却是不同的定义。
第一种方式：首先父组件上，@updateval是一个子组件向父组件传递的媒介。使用this.$emit('updateval',val)，后面的参数就是传递给父组件的参数；
第二种方式：:updateva也是一种传递，传递的是定义的数据，区别是父组件将数据传递给子组件。
在子组件中通过props接收数据，也可以说是父组件在子组件的props中定义初始化字段，
类似data中初始化的字段,但又区别于data，props接收的字段在子组件中不可更改的，不允许在子组件中直接更改父组件数据。

Answer 5

你描述的通过props这个其实是将父组件的函数作为props传递给了子组件,子组件就像拥有这个函数属性一样。
通过$emit是事件监听的方式，是比较常用的方式。
在一些情形下，二者都可以用，不过后者用的比较多一些。

很多时候父元素收到emit的事件，可能会执行多个函数，这时候用emit就比较方便。