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