VUE兄弟コンポーネント間で値$emitと$onを渡します

  • 質問:追加または表示するには、新しいページを開く必要があります。これは、Vueページのライフサイクルの再ウォーキングと見なすことができます。したがって、VueXを使用して状態を保存することはできません。

  • 要件:新しいページを追加するには、ページがデータを追加しているか、データを表示ているかを判断する必要があります。

image.png

クリックした後

image.png左側のサイドバーと右側は兄弟コンポーネントです。新しいページが新しいデータであるかどうかを判断するには、Id値を使用する必要があります

1.ページパス値を追加します

Id=''//空を使用します。新規として示します。空でない場合は、表示することを意味します

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

2.兄弟コンポーネント間で値を渡す

使用する e m t 放出し、 _

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)
    },
}
复制代码

作成されたで実行

this.sendAddFlag()
复制代码

3.左側のメニューページ

メッセージのインポート

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' }
        }
      })
    },
复制代码

作成されたで実行

    this.reseiveAddFlag()
复制代码

4.ページの動的レンダリング

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

おすすめ

転載: juejin.im/post/7012979628285362207