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)文章
vue-seamless-scroll 實(shí)現(xiàn)簡(jiǎn)單自動(dòng)無縫滾動(dòng)且添加對(duì)應(yīng)點(diǎn)擊事件的簡(jiǎn)單整理
vue-seamless-scroll是一個(gè)基于Vue.js的簡(jiǎn)單無縫滾動(dòng)組件, 基于requestAnimationFrame實(shí)現(xiàn),配置多滿足多樣需求,目前支持上下左右無縫滾動(dòng),單步滾動(dòng),及支持水平方向的手動(dòng)切換功能,本節(jié)介紹,vue添加 vue-seamless-scroll實(shí)現(xiàn)自動(dòng)無縫滾動(dòng)的效果,并對(duì)應(yīng)添加點(diǎn)擊事件2023-01-01vue利用vue meta info設(shè)置每個(gè)頁面的title與meta信息
這篇文章主要給大家介紹了關(guān)于vue如何利用vue meta info設(shè)置每個(gè)頁面的title與meta信息的相關(guān)資料,文中將實(shí)現(xiàn)的方法介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用vue具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2021-10-10vue2.0 如何把子組件的數(shù)據(jù)傳給父組件(推薦)
這篇文章主要介紹了vue2.0 如何把子組件的數(shù)據(jù)傳給父組件,需要的朋友可以參考下2018-01-01mpvue中配置vuex并持久化到本地Storage圖文教程解析
這篇文章主要介紹了mpvue中配置vuex并持久化到本地Storage的教程詳解,# 配置vuex和在vue中相同,只是mpvue有一個(gè)坑,就是不能直接在new Vue的時(shí)候傳入store。本文分步驟給大家介紹的非常詳細(xì),需要的朋友參考下吧2018-03-03Vue實(shí)現(xiàn)移動(dòng)端日歷的示例代碼
工作中遇到一個(gè)需求是根據(jù)日歷查看某一天/某一周/某一月的睡眠報(bào)告,但是找了好多日歷組件都不是很符合需求,只好自己手寫一個(gè)日歷組件,順便記錄一下,希望對(duì)大家有所幫助2023-04-04Vue+Video.js實(shí)現(xiàn)視頻抽幀并返回抽幀圖片Base64
這篇文章主要為大家詳細(xì)介紹了Vue如何利用Video.js實(shí)現(xiàn)視頻抽幀并返回抽幀圖片Base64,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以了解下2024-01-01Vue中watch、computed、updated三者的區(qū)別及用法
這篇文章主要介紹了Vue中watch、computed、updated三者的區(qū)別及用法說明,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-07-07