[vue] 组件之间通信方法

父传子
静态传值：父组件在子组件标签中写入要传递的变量及变量值
<child message="messageValue"></child>
动态传值：父组件在子组件标签中用v-bind指令为所传变量动态绑定变量值
<child :message="message"></child>

子组件中使用props接收父组件的数据
props:["message"]

QQ图片20200528165908.png QQ图片20200528165919.png

此时的数据是单向绑定，父组件数据改变影响子组件，将上述例子中 :put_demo4="put_demo4" 替换成:put_demo4.sync="put_demo4"即可实现数据双向绑定

---

子传父
父组件在引用的子组件上定义一个自定义事件，并绑定事件函数，用于接受子组件传过来的值
<child @customEvent="eventFunction"></child >
子组件通过函数使用$emit()触发父组件自定义事件，将数据传递给父组件
this.$emit("customEvent", this.message);

QQ图片20200530014339.png QQ图片20200530014343.png

兄弟组件传值
方法一：利用父组件作为桥梁，通过父子传值方法，以子组件1=>父组件=>子组件2的方式进行兄弟组件通信
方式二：在main.js创建vue实例eventBus，在组件一中使用eventBus.$emit()触发自定义事件，在组件二中使用eventBus.on()实现对自定义事件的侦听，以此达到 兄弟组件间的通信

QQ图片20200531122918.png QQ图片20200531122820.png