• Problem: To add or view a new page, you need to open a new page, which can be considered as a re-walk through the Vue page life cycle. Therefore, VueX cannot be used to store state.

  • Requirement: Add a page, need to determine whether the page is to add data, or view data.

After clicking on

SideBar on the left and sideBar on the right are siblings. You need an Id value to determine whether the new page isThe new data.

1. Add page transfer values

Use Id = “// empty. Indicates new. If the value is not empty, view it

    medicalId = ' '
    this.showAgedForm(medicalId)
Copy the code

2. Value transfer between sibling components

Use emit and emit and emit and on

1. Establish the bus msg.js

Create msg.js in js

import Vue from 'vue'
export default new Vue()
Copy the code

2. The right page

Import msg.js in js

import Msg from '.. /js/msg.js'
Copy the code

Create a function to send data

methods:{
    sendAddFlag() { / / send id
      Msg.$emit('medicalFlag'.this.medical_id)
      console.log('Medical_id passed out'.this.medical_id)
    },
}
Copy the code

Implemented in CREATED

this.sendAddFlag()
Copy the code

3. The left menu page is displayed

Import the Msg

import Msg from '.. /.. /.. /js/msg.js'
Copy the code

Set up the function to receive the data

reseiveAddFlag() {
      var _this = this // We need to change the direction of this
      Msg.$on('medicalFlag'.function(idFlag) {
        // console.log(' passed medical_id', idFlag)
        if(idFlag ! = =' ') {
          // If medical_id is passed as "(empty), it is new
          _this.sideHideOrShow = { display: 'block'}}else {
          _this.sideHideOrShow = { display: 'none'}}})},Copy the code

Implemented in CREATED

    this.reseiveAddFlag()
Copy the code

4. Dynamic rendering of pages

<div class="sidebar" :style="sideHideOrShow">
Copy the code