-
質問:追加または表示するには、新しいページを開く必要があります。これは、Vueページのライフサイクルの再ウォーキングと見なすことができます。したがって、VueXを使用して状態を保存することはできません。
-
要件:新しいページを追加するには、ページがデータを追加しているか、データを表示しているかを判断する必要があります。
クリックした後
左側のサイドバーと右側は兄弟コンポーネントです。新しいページが新しいデータであるかどうかを判断するには、Id値を使用する必要があります。
1.ページパス値を追加します
Id=''//空を使用します。新規として示します。空でない場合は、表示することを意味します
medicalId = ''
this.showAgedForm(medicalId)
复制代码
2.兄弟コンポーネント間で値を渡す
使用する _
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">
复制代码