Vue组件传值：父传子、子传父、兄弟组件间的传值

父组件向子组件传值

 1.在子组件的 props 中以数组形式接收父组件传递过来的值；

2.父组件在使用组件时在组件属性中使用 v-bind 指令动态传值给子组件。示例如下：

    

        
{{tip}}
        
        
        
    

    

注：父组件可以向子组件传递任意类型的值，但是如果要动态传递值则必须使用 v-bind (语法糖为 :)的方式，不然传递的值就是字符串类型了。

子组件向父组件传值

1.在子组件中通过 $emit() 来触发父组件中的自定义事件并传值，参数1为自定义事件名，参数2为要传递给父组件的值。

2.父组件在使用子组件时通过 v-on (语法糖为 @)来定义自定义事件并监听该事件的响应，通过 $event 作为事件响应参数来接收子组件传递过来的值。

    

        
        
这是父组件中的文字，其字体大小由子组件决定
        
        
        
        
        
    

    

非父子组件间传值（如兄弟组件）

1.非父子组件间的互相传值相当于发布订阅模式；

2.通过 $emit() 去触发别的组件的自定义事件，并将组件中的值作为第二个参数传递出去；

3.通过 $on() 来监听自定义事件的触发并通过第二个参数来接收组件传递的值。