vue组件传值总结

1）通过$props进行父子组件通信

#props down属性向下传

当父组件中，有需要子组件接受的属性，需要在子组件中props中标明。若涉及到隐藏与否，父组件传给子组件的是布尔值，子组件除了需要在子组件中props中标明，还需要v-show绑定属性值，另外在父组件中动态绑定。
·属性验证：
为了确保父组件传给子组件的是正确的类型，可以在子组件props接收属性时，进行属性验证，如props：{name：string}

2）通过$emit进行父子组件通信
#event up事件向上传
子组件向父组件传值，需要绑定事件。如下图中，在父组件中，<child @myevent=“@handleEvent（）”></child>，handleEvent事件在父组件中通过methods:{}绑定，在子组件中，绑定方法paymoney，这个方法在子组件中通过methods:{}绑定。若想将子组件的值传给父组件，paymoney方法需要通过$emit函数调用myevent实现传值，$emit函数可传多个参数，父组件通过一下两种方法获取:
1、将父组件中，handleEvent（）的（）去掉，就可以传多个参数
2、将父组件中，handleEvent（）改为handleEvent（$event），也可以传多个参数
3）通过ref进行父子组件通信
#ref若在标签中使用，获取的是一个dom节点，获取时采用this.$refs.ref名.属性即可获取该dom节点的属性。
#ref若在组件中使用，获取的是组件对象，同理，父组件可通过this.$refs.ref名.属性获取子组件的属性值，通过this.$refs.ref名.方法获取子组件的方法。
4）非父子组件通信 事件总线
兄弟组件之间不能直接通信，需要一个实例化对象作为中介，为二者传递消息，a组件将消息传给实例化对象object，而b组件随时监听实例化对象的变化。
首先实例化对象定义:var bus=new Vue();
a组件向object传递信息，运用$emit方法，bus.$emit(“weixinmassage”,this.$refs.ref名.属性)
b组件监听object变化，运用mounted钩子函数，$on方法进行监听，bus.$on(“weixinmassage”，(data)=>{})