Vue组件之间传递数据

本篇主要内容：

1、父组件向子组件传值

2、父组件向子组件传递方法

3、将整个父组件传给子组件

4、父组件主动获取子组件的数据

5、子组件主动获取父组件的数据

6、非父子组件传递数据

父组件向子组件传值：

标注一 定义需要传的值

标注二 在父组件使用子组件的时候，绑定动态属性，注意写法，标注三、四中的变量名要与标注二中等号前的变量名保持一致，即在data中定义的***，标记里就写 ：***='***'

标注三 在子组件里通过props接收父组件里传来的数据（props还可以验证父组件给子组件传值的合法性）

标注四 使用数据

父组件向子组件传递方法：

与传值步骤一样，注意写法不太一样。以及给方法传值时，可以从子组件中传给父组件中的方法。

将整个父组件传给子组件

标注一 中的this 是指父组件本身

标注四 中的this是指子组件，因为父组件已经传给了子组件，所以在子组件中使用父组件中的数据，应该像标注四那样写。

父组件主动获取子组件的数据

子组件主动获取父组件的数据

非父子组建的传值

1、新建一个js文件，然后引入vue，实例化并暴露这个vue实例。

2、在要广播的地方引入刚才定义的Vue实例，并通过 vueEmit.$emit('名称','数据'); 广播数据。

3、在接收数据的地方引入刚才定义的Vue实例，通过 vueEmit.$on('名称',function(){.....}); 接收数据。