vue 兄弟组件/同级组件之间的通信

思路:A 、 B 组件都是 父组件F 里面的子组件, A组件发生改变后 通过事件触发 通知父组件F ,让父组件F 去 触发 一个方法(该方法会改变B组件里面的值),从而改变 另一个子组件B里面的值

show.vue里面有两个组件:如下:

<div v-show="tabIndex == 1">  // 账单信息

    <detail-header :orderDetail="detailHeader"></detail-header>   // detailHeader为show页面请求来的账单信息

</div

<div v-if="tabIndex == 2>   // 订单详情列表

      <order-list :detail="tableData" @refresh="getDetail"></order-list>

</div>

detail-header 组件里面的数据来源于 show 页面请求的接口数据:datailHeader

orderList 组件里面 点调整 弹弹框 adjustmentModal.vue:

弹框组件adjustmentModal.vue:里面调整提交 成功后 触发父组件orderList 里面的refresh方法:

当事件传递到 show页面时,@refresh="getDetail" ,即触发 show 页面再次请求刷新 header账单信息,改变了

detailHeader的值:

猜你喜欢

转载自blog.csdn.net/qq_37126704/article/details/86526515