vueコンポーネント間の値伝達方式の詳細

コンポーネント間の伝達値は2つに分類されます
1.コンポーネントジャンプ時のパス(兄弟コンポーネント間のパス)
2.親子コンポーネント間の評価
3.Vuexによる値送り
1.兄弟コンポーネント間の伝達値
解決策:paramsとqueryで値を渡す
Aコンポーネント

1.A      this.$router.push({name: 'XXX', params: {id: id}})
 
this.$router.push({path: '/XXX',name:'XXX  query: {id: id}})

Bページ

id :this.$route.params.id 
 
id :this.$route.query.id

queryでパラメータを渡すと、ページがリフレッシュされてもデータは消えません.でもparamsがリフレッシュしたら消える!
ただし、pramasで値を転送し、ページデータが消えないようにするには、ルーティング構成のpathに対応するパラメータを加えるだけでよい例:{name:'XXXX',path:'/XXX/:id',component:XX}
ただし、queryパスページのURLにはパラメータを渡す情報が表示され、paramsは表示されません.
まとめparamsとquery:セキュリティ:paramsはurlに渡されたパラメータ情報を表示しません.重要な情報であればparamsの使い勝手をお勧めします.queryはルーティングを再構成することなくリフレッシュパラメータが消えないことを実現できます.parmasとqueryの特徴は以上です.必要に応じて使用できます(̀ㅂ•́)و✧
2.親子コンポーネント間の評価 ：（ ）

1.親コンポーネントから子コンポーネントに値を渡す
親コンポーネント
':totalCount':サブコンポーネントに必要なパラメータ「totalCount」:親コンポーネントから渡されたパラメータ
サブコンポーネントはpropsで値を受け入れます

  props: {
      totalCount:  { 
      type: Number,      //      
           default: 0    //   
           } 
      }

2.子コンポーネントから親コンポーネントへの値の伝達
サブコンポーネントイベントをカスタマイズして親コンポーネントに渡す

     this.$emit("paging", response.data.allData.list);

親コンポーネントは、登録されたサブコンポーネントにメソッドを受け入れる文を追加します.@paging="OtherData"
@pagingは、サブコンポーネントの定義を受け入れる方法です(親子コンポーネントを接続するブリッジに相当します)
otherDataが親コンポーネントとして定義する方法

    OtherData(data) {
          this.messageList = data;  // data==response.data.allData.list
           }

3.Vuexによるパラメータ伝達
Vuexは公共の場所に相当し、パラメータを伝達するにはvuexでデータを読み書きするだけでよい

まずvuexでデータを定義

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

const state = {    
table:""
}  

const mutations = { 
    GET_TABLE:(state,data)=>{   state.table=data  }
    }
    
const actions = {}
export default new Vuex.Store({ 
   state, 
   mutations,
   actions
   })

データの書き込み

this.$store.commit("GET_TABLE",table)

データを読み出す

.

this.$store.state.table

皆さんはvuexを使うのがとても便利だと思います＾(￣)￣)＾
ps:vuexのインストールと構成については、後でチュートリアルが出ますよ(#`O’)