vue App.vue中的公共組件改變值觸發(fā)其他組件或.vue頁面監(jiān)聽
業(yè)務(wù)場景重現(xiàn)
現(xiàn)在我的App.vue里面有一個頭部的公共組件，頭部組件里有一個輸入框，當(dāng)我輸入詞條時，將詞條傳進(jìn)App.vue里的<router-view>里的.vue頁面，并進(jìn)行查詢獲取數(shù)據(jù)
解決思路如下：
1.如何拿到頭部的詞條
2.當(dāng)詞條改變時如何觸發(fā).vue里的請求數(shù)據(jù)事件
解決方案
我是用vuex數(shù)據(jù)倉庫來存儲詞條的，當(dāng)詞條改變時，修改數(shù)據(jù)倉庫里的詞條
然后在.vue頁面里監(jiān)聽這個詞條，當(dāng)詞條改變時觸發(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) //當(dāng)輸入詞條時，將詞條更新到數(shù)據(jù)倉庫
}
},
vue頁面里監(jiān)聽詞條
computed: { 監(jiān)聽詞條
getSearchKey(){
return this.$store.state.searchKey
}
},
watch: {
getSearchKey: {
handler(newValue,oldValue){ //當(dāng)詞條改變時執(zhí)行事件
this.recordis(newValue)
// console.log('new',newValue)
// console.log('old',oldValue)
}
}
},
總結(jié)
以上所述是小編給大家介紹的vue App.vue中的公共組件改變值觸發(fā)其他組件或.vue頁面監(jiān)聽,希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
如果你覺得本文對你有幫助，歡迎轉(zhuǎn)載，煩請注明出處，謝謝！
相關(guān)文章
vue-seamless-scroll 實現(xiàn)簡單自動無縫滾動且添加對應(yīng)點擊事件的簡單整理
vue-seamless-scroll是一個基于Vue.js的簡單無縫滾動組件, 基于requestAnimationFrame實現(xiàn),配置多滿足多樣需求，目前支持上下左右無縫滾動，單步滾動，及支持水平方向的手動切換功能，本節(jié)介紹，vue添加 vue-seamless-scroll實現(xiàn)自動無縫滾動的效果，并對應(yīng)添加點擊事件2023-01-01
這篇文章主要介紹了解決vue路由name同名,路由重復(fù)的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08
vue利用vue meta info設(shè)置每個頁面的title與meta信息
這篇文章主要給大家介紹了關(guān)于vue如何利用vue meta info設(shè)置每個頁面的title與meta信息的相關(guān)資料,文中將實現(xiàn)的方法介紹的非常詳細(xì),對大家學(xué)習(xí)或者使用vue具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2021-10-10
vue2.0 如何把子組件的數(shù)據(jù)傳給父組件(推薦)
這篇文章主要介紹了vue2.0 如何把子組件的數(shù)據(jù)傳給父組件,需要的朋友可以參考下2018-01-01
mpvue中配置vuex并持久化到本地Storage圖文教程解析
這篇文章主要介紹了mpvue中配置vuex并持久化到本地Storage的教程詳解,# 配置vuex和在vue中相同，只是mpvue有一個坑，就是不能直接在new Vue的時候傳入store。本文分步驟給大家介紹的非常詳細(xì)，需要的朋友參考下吧2018-03-03
工作中遇到一個需求是根據(jù)日歷查看某一天/某一周/某一月的睡眠報告，但是找了好多日歷組件都不是很符合需求，只好自己手寫一個日歷組件，順便記錄一下，希望對大家有所幫助2023-04-04
Vue+Video.js實現(xiàn)視頻抽幀并返回抽幀圖片Base64
這篇文章主要為大家詳細(xì)介紹了Vue如何利用Video.js實現(xiàn)視頻抽幀并返回抽幀圖片Base64,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以了解下2024-01-01
Vue中watch、computed、updated三者的區(qū)別及用法
這篇文章主要介紹了Vue中watch、computed、updated三者的區(qū)別及用法說明，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
在?Vue3?中，有許多與響應(yīng)式相關(guān)的函數(shù)，例如?toRef、toRefs、isRef、unref?等等,本文將詳細(xì)介紹這些函數(shù)的用法，讓我們在實際開發(fā)中知道應(yīng)該使用哪些?API?并能夠熟練地回答面試官的相關(guān)問題2023-08-08
本篇文章主要介紹了使用 async-validator 編寫 Form 組件的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-01-01