组件之间通信（子传父）

Posted 2020-11-29 happyeveryuday

vue中子向父组件传递数据一般用$emit自定义事件，在父组件中监听这个事件并在回调中写相关逻辑。

// 父组件监听子组件定义的事件
 <editor :inputIndex="index" @editorEmit=‘editorEmit‘></editor>
// 子组件需要返回数据时执行，并可以传递数据
this.$emit(‘editorEmit‘, data)

那么问题来了，我是不是真的有必要去向父组件返回这个数据，用自定义事件可以在当子组件想传递数据或向子组件传递的数据有变化需要重新传递时执行，那么另外一种场景， 父组件需要子组件的一个数据但子组件并不知道或者说没有能力在父组件想要的时候给父组件 ，那么这个时候就要用到组件的一个选项 ref ：

<editor ref="editor" @editorEmit=‘editorEmit‘></editor>

 

父组件在标签中定义ref属性，在js中直接调用 this.$refs.editor 就是调用整个子组件，子组件的所有内容都能通过ref去调用，当然我们并不推荐因为这会使数据看起来非常混乱，

所以我们可以在子组件中定义一种专供父组件调用的函数， ，比如我们在这个函数中返回子组件data中某个数据，当父组件想要获取这个数据就直接主动调用ref执行这个函数获取这个数据，这样能适应很大一部分场景，逻辑也更清晰一点 .

另外，父向子传递数据也可以用ref，有次需要在一个父组件中大量调用同一个子组件，而每次调用传递的prop数据都不同，并且传递数据会根据之后操作变化，这样我需要在data中定义大量相关数据并改变它，我 可以直接用ref调用子组件函数直接把数据以参数的形式传给子组件 ，逻辑一下子清晰了.

如果调用基础组件可以在父组件中调用ref执行基础组件中暴露的各种功能接口，比如显示，消失等.