業務場景重現

現在我的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頁面監聽,希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對錯新站長站網站的支持！
如果你覺得本文對你有幫助，歡迎轉載，煩請注明出處，謝謝！