-
问题:新增或者查看都需要新打开一个页面,可以认为是重新走了一遍Vue页面的生命周期。因此不能用VueX来存储状态。
-
需求:新增一个页面,需要判断该页面是新增数据,还是查看数据。
点击后
左边sideBar和右边的为兄弟组件。需要通过一个Id的值判断此新增页面是否为新增数据。
1.新增页传值
用Id = '' // 空。表示为新增。不为空则表示查看
medicalId = ''
this.showAgedForm(medicalId)
复制代码
2. 兄弟组件间的传值
采用 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">
复制代码