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)聽,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
如果你覺得本文對你有幫助,歡迎轉載,煩請注明出處,謝謝!
相關文章
vue-seamless-scroll 實現(xiàn)簡單自動無縫滾動且添加對應點擊事件的簡單整理
vue-seamless-scroll是一個基于Vue.js的簡單無縫滾動組件, 基于requestAnimationFrame實現(xiàn),配置多滿足多樣需求,目前支持上下左右無縫滾動,單步滾動,及支持水平方向的手動切換功能,本節(jié)介紹,vue添加 vue-seamless-scroll實現(xiàn)自動無縫滾動的效果,并對應添加點擊事件2023-01-01vue利用vue meta info設置每個頁面的title與meta信息
這篇文章主要給大家介紹了關于vue如何利用vue meta info設置每個頁面的title與meta信息的相關資料,文中將實現(xiàn)的方法介紹的非常詳細,對大家學習或者使用vue具有一定的參考學習價值,需要的朋友可以參考下2021-10-10vue2.0 如何把子組件的數(shù)據(jù)傳給父組件(推薦)
這篇文章主要介紹了vue2.0 如何把子組件的數(shù)據(jù)傳給父組件,需要的朋友可以參考下2018-01-01mpvue中配置vuex并持久化到本地Storage圖文教程解析
這篇文章主要介紹了mpvue中配置vuex并持久化到本地Storage的教程詳解,# 配置vuex和在vue中相同,只是mpvue有一個坑,就是不能直接在new Vue的時候傳入store。本文分步驟給大家介紹的非常詳細,需要的朋友參考下吧2018-03-03Vue+Video.js實現(xiàn)視頻抽幀并返回抽幀圖片Base64
這篇文章主要為大家詳細介紹了Vue如何利用Video.js實現(xiàn)視頻抽幀并返回抽幀圖片Base64,文中的示例代碼講解詳細,感興趣的小伙伴可以了解下2024-01-01Vue中watch、computed、updated三者的區(qū)別及用法
這篇文章主要介紹了Vue中watch、computed、updated三者的區(qū)別及用法說明,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07