VUE 兄弟组件之间传值 $emit和$on

• 问题：新增或者查看都需要新打开一个页面，可以认为是重新走了一遍Vue页面的生命周期。因此不能用VueX来存储状态。

• 需求：新增一个页面，需要判断该页面是新增数据，还是查看数据。

点击后

左边sideBar和右边的为兄弟组件。需要通过一个Id的值判断此新增页面是否为新增数据。

1.新增页传值

用Id = '' // 空。表示为新增。不为空则表示查看

    medicalId = ''
    this.showAgedForm(medicalId)
复制代码

2. 兄弟组件间的传值

采用 $emit和$on

1. 建立总线Msg.js

在js中创建Msg.js

import Vue from 'vue'
export default new Vue()
复制代码

2.右边页面

在js中导入Msg.js

import Msg from '../js/msg.js'
复制代码

建立函数表示发送数据

methods:{
    sendAddFlag() { // 发送id
      Msg.$emit('medicalFlag', this.medical_id)
      console.log('传递出去的medical_id', this.medical_id)
    },
}
复制代码

在created中执行

this.sendAddFlag()
复制代码

3.左边的菜单页面

导入Msg

import Msg from '../../../js/msg.js'
复制代码

建立函数表示接收数据

reseiveAddFlag() {
      var _this = this // 此处需要改变this的指向
      Msg.$on('medicalFlag', function(idFlag) {
        // console.log('传递过来的medical_id', idFlag)
        if (idFlag !== '') {
          // 传递过来的medical_id为''(空)，则表示为新增的
          _this.sideHideOrShow = { display: 'block' }
        } else {
          _this.sideHideOrShow = { display: 'none' }
        }
      })
    },
复制代码

在created中执行

    this.reseiveAddFlag()
复制代码

4.页面的动态渲染

<div class="sidebar" :style="sideHideOrShow">
复制代码