Vue中父组件向子组件传递数据的几种方法

最近在学习vue的源码，总结了几种vue中父子组件传递数据的方法。

1.props & event

父组件向子组件传递props数据，子组件通过触发事件向父组件回传数据，代码如下：

//子组件 

{{name}}

//父组件

以上就是一个完整的流程，父组件通过props将数据传递给子组件，子组件则触发事件，由父组件监听，并做相应处理。

2.ref

ref属性可定义在子组件或原生DOM上，如果在子组件上，则指向子组件实例，如果在原生DOM上，则指向原生DOM元素（可以用做元素选择，省去querySelector的烦恼）。

传递数据的思路：在父组件内通过ref获取子组件实例，然后调用子组件方法，并传递相关数据作为参数。代码如下：

//子组件 

{{parentMsg}}

//父组件

SEND MESSAGE

3.provide & inject 官方不推荐在生产环境使用

provide意为提供，当一个组件通过provide提供了一个数据，那么它的子孙组件就可以使用inject接受注入，从而可以使用祖先组件传递过来的数据。代码如下：

//child

{{appName}}

// root export default{ data(){ return { appName:'Test' } }, provide:['appName'] }

4.vuex

vue官方推荐的全局状态管理插件。不细说。