组件间通信

1.props：父给子传递数据

（1）父组件中在子组件自身传递数据

home父组件

（2）子组件在props接收父组件传递过来的数据

Floor子组件

 props中的数据直接挂载到组件实例中，直接用this...可以访问的到

2.自定义事件：子给父传递数据

 （1）子组件中触发自定义事件

在子组件中有一个点击事件：点击事件中的方法中使用this.$emit('自定义事件名称'，传递的参数)

tradeMarkHandler和attrInfo是子组件中的点击事件

 

 在methods中给点击事件绑定回调函数

（2）父组件定义自定义事件并接收数据

在父组件中的子标签上写自定义事件及方法   -----   @自定义事件名称=“方法名称”

在父组件的methods中定义方法

3.全局事件总线$bus：任意组件中通信

（1）在入口文件main.js中安装全局事件总线，$bus就是当前应用的vm

 （2）使用全局事件总线

1）传递方methods：$emit

 2）接收方mounted()：$on

 3) 最好在beforeDestory钩子中，用$off解绑当前组件所用到的事件

 4.插槽：父子组件间通信

一般是结构，即标签，子组件无法决定自身的结构，需要父组件决定

插槽分为：默认插槽、具名插槽和作用域插槽

作用：父组件向子组件指定位置插入html结构（默认插槽、具名插槽），或者子组件给父组件传递数据，父组件决定插入子组件对应位置的结构（作用域插槽）

（1）默认插槽

 （2）具名插槽

 （3）作用域插槽

 

5.vuex 万能

向仓库中存储数据，其他组件可以从仓库中获取数据

 6.消息的订阅与发布，任意组件间通信

（1）安装pubsub

npm i pubsub-js

（2）引入pubsub

import pubsub from 'pubsub-js'

（3）传递方

pubsub.publish('×××'，数据)

（4）接收方

 （5）注意：最好在beforeDestory钩子中，用pubsub.unsubscribe(pid)去取消订阅

7.v-model：子组件有表单元素时，实现父子组件数据实时同步

（1）父组件传递数据，在子组件的input中显示，并接收子组件input改变的值，修改data中的相关数据

（2）子组件接收父组件的数据在input中显示，并传递自己改变的值在父组件中修改对应的data中的数据

 8.sync属性修饰符：实现父子组件之间数据实时同步

作为一个编译时的语法糖存在，会被扩展为一个自动更新父组件属性的v-on监听器.与v-model类似

当一个子组件改变了一个 prop 的值时，这个变化也会同步更新到父组件中

<Child :money.sync="total"/>

相当于

<Child :money="total" v-on:update:money="total = $event"/>

上述代码的含义：

给子组件传递一个名为money的props，并给自身自动绑定一个自定义事件，自定义事件为子组件触发的事件名称，将子组件触发自定义事件时传递过来的值自动赋予自身money所绑定的data中的数据total

实例说明：

（1）父组件

 （2）子组件

 9.$refs和$parent：父子组件通信

父组件：

 

 

 

 子组件：