vue App.vue中公共組件改變值觸發其他組件或.vue頁面監聽的示例分析

這篇文章主要為大家展示了“vue App.vue中公共組件改變值觸發其他組件或.vue頁面監聽的示例分析”，內容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領大家一起研究并學習一下“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)
  }
 }
})

App.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頁面監聽的示例分析”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！