vue App.vueにおける共通のコンポーネントの変更値は、他のコンポーネントまたはvueページの傍受をトリガする。

ビジネスシーンの再現
今私のApp.vueの中には頭の公共部品があります。頭のセットには入力ボックスがあります。フレーズを入力すると、そのフレーズをApp.vueの「router-view」の中の.vueページに伝えて、データを検索して取得します。
解決の考えは以下の通りです。
1.頭のフレーズはどうやって手に入れますか？
2.用語が変わったらどうやってトリガしますか？vue内の要求データイベント
ソリューション
私はvuexデータ倉庫でフレーズを保存しています。フレーズが変わった時、データ倉庫の中のフレーズを修正します。
そして.vueページでこのフレーズをモニターして、フレーズが変更された時にデータを要求するイベントをトリガします。
コード
データ倉庫store.js

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
 state: {
  searchKey: ''    //       
 },
 mutations: {         //         
  changeSearchKey(state,value){
   state.searchKey = value
  }
 },
 actions: {         //             
  setSearchKey(context,value){  
   context.commit('changeSearchKey',value)
  }
 }
})

アプリ.vueの中のheaderコンポーネント

goSearch: function(){
      if(this.value){
        this.$store.dispatch('setSearchKey',this.value) //      ，          
      }
    },

vueページでフレーズを傍聴します。

computed: {               
    getSearchKey(){
      return this.$store.state.searchKey
    }
  },
  watch: {
    getSearchKey: {
      handler(newValue,oldValue){ //          
        this.recordis(newValue)
        // console.log('new',newValue)
        // console.log('old',oldValue)
      }
    }

  },

締め括りをつける
以上述べたのは小编でご绍介したvue App.vueの中の公共のコンポーネントの変更値が他のコンポーネントやvueページのモニターをトリガするので、皆さんの助けになりたいです。ここでも私たちのサイトを応援してくれてありがとうございます。
本文があなたのためになると思ったら、転載を歓迎します。出所を明記してください。ありがとうございます。