vue App.vue中的公共組件改變值觸發(fā)其他組件或.vue頁面監(jiān)聽
業(yè)務(wù)場(chǎng)景重現(xiàn)
現(xiàn)在我的App.vue里面有一個(gè)頭部的公共組件，頭部組件里有一個(gè)輸入框，當(dāng)我輸入詞條時(shí)，將詞條傳進(jìn)App.vue里的<router-view>里的.vue頁面，并進(jìn)行查詢獲取數(shù)據(jù)
解決思路如下：
1.如何拿到頭部的詞條
2.當(dāng)詞條改變時(shí)如何觸發(fā).vue里的請(qǐng)求數(shù)據(jù)事件
解決方案
我是用vuex數(shù)據(jù)倉庫來存儲(chǔ)詞條的，當(dāng)詞條改變時(shí)，修改數(shù)據(jù)倉庫里的詞條
然后在.vue頁面里監(jiān)聽這個(gè)詞條，當(dāng)詞條改變時(shí)觸發(fā)請(qǐng)求數(shù)據(jù)的事件
代碼
數(shù)據(jù)倉庫store.js
import Vue from 'vue' import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
searchKey: '' //存庫詞條的變量
},
mutations: { //修改數(shù)據(jù)倉庫的事件
changeSearchKey(state,value){
state.searchKey = value
}
},
actions: { //推薦使用的異步修改數(shù)據(jù)倉庫
setSearchKey(context,value){
context.commit('changeSearchKey',value)
}
}
})
App.vue里的header組件
goSearch: function(){
if(this.value){
this.$store.dispatch('setSearchKey',this.value) //當(dāng)輸入詞條時(shí)，將詞條更新到數(shù)據(jù)倉庫
}
},
vue頁面里監(jiān)聽詞條
computed: { 監(jiān)聽詞條
getSearchKey(){
return this.$store.state.searchKey
}
},
watch: {
getSearchKey: {
handler(newValue,oldValue){ //當(dāng)詞條改變時(shí)執(zhí)行事件
this.recordis(newValue)
// console.log('new',newValue)
// console.log('old',oldValue)
}
}
},
總結(jié)
以上所述是小編給大家介紹的vue App.vue中的公共組件改變值觸發(fā)其他組件或.vue頁面監(jiān)聽,希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
如果你覺得本文對(duì)你有幫助，歡迎轉(zhuǎn)載，煩請(qǐng)注明出處，謝謝！
相關(guān)文章
五分鐘搞懂Vuex實(shí)用知識(shí)(小結(jié))
本篇文章主要介紹了五分鐘搞懂Vuex實(shí)用知識(shí)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08
淺談vue-props的default寫不寫有什么區(qū)別
這篇文章主要介紹了淺談vue-props的default寫不寫有什么區(qū)別，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-08-08
Vue3的el-table-column增加跳轉(zhuǎn)其他頁面的方法
文章介紹了如何在Vue3的el-table-column中增加跳轉(zhuǎn)其他頁面的功能,并提供了示例代碼和handleUpdate方法的源碼分析,感興趣的朋友跟隨小編一起看看吧2025-02-02
這篇文章主要介紹了深入理解vue中的$set,小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-06-06
這篇文章主要介紹了Vue高級(jí)特性概念原理，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)吧2023-03-03
vue3使用富文本編輯器Editor.js的簡(jiǎn)單方法
Editor.js是一個(gè)用于構(gòu)建具有完全可定制化塊結(jié)構(gòu)的現(xiàn)代編輯器的開源庫,它提供了一個(gè)簡(jiǎn)潔、可擴(kuò)展和易于使用的接口,使開發(fā)人員能夠創(chuàng)建擁有豐富內(nèi)容和互動(dòng)性的編輯器,這篇文章主要給大家介紹了關(guān)于vue3使用富文本編輯器Editor.js的簡(jiǎn)單方法,需要的朋友可以參考下2024-04-04
Vue中使用方法、計(jì)算屬性或觀察者的方法實(shí)例詳解
這篇文章主要介紹了Vue中如何使用方法、計(jì)算屬性或觀察者的相關(guān)知識(shí)，非常不錯(cuò)，具有一定的參考借鑒價(jià)值 ,需要的朋友可以參考下2018-10-10
使用mint-ui開發(fā)項(xiàng)目的一些心得(分享)
下面小編就為大家?guī)硪黄褂胢int-ui開發(fā)項(xiàng)目的一些心得(分享)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-09-09
uniapp-ios開發(fā)之App端與webview端相互通信的方法以及注意事項(xiàng)
在uni-app與Webview之間進(jìn)行數(shù)據(jù)交互是非常常見的需求,下面這篇文章主要給大家介紹了關(guān)于uniapp-ios開發(fā)之App端與webview端相互通信的方法以及注意事項(xiàng)的相關(guān)資料,需要的朋友可以參考下2024-07-07
使用Vue完成一個(gè)簡(jiǎn)單的todolist的方法
本篇文章主要介紹了使用Vue完成一個(gè)簡(jiǎn)單的todolist的方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-12-12