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