vueApp.vue中公共組件改變值觸發(fā)其他組件或.vue頁面監(jiān)聽的示例分析
這篇文章主要為大家展示了“vue App.vue中公共組件改變值觸發(fā)其他組件或.vue頁面監(jiān)聽的示例分析”，內容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領大家一起研究并學習一下“vue App.vue中公共組件改變值觸發(fā)其他組件或.vue頁面監(jiān)聽的示例分析”這篇文章吧。
成都創(chuàng)新互聯(lián)公司主營奉化網站建設的網絡公司,主營網站建設方案,成都app軟件開發(fā),奉化h5重慶小程序開發(fā)搭建,奉化網站營銷推廣歡迎奉化等地區(qū)企業(yè)咨詢
業(yè)務場景重現(xiàn)
現(xiàn)在我的App.vue里面有一個頭部的公共組件，頭部組件里有一個輸入框，當我輸入詞條時，將詞條傳進App.vue里的
解決思路如下：
1.如何拿到頭部的詞條
2.當詞條改變時如何觸發(fā).vue里的請求數(shù)據事件
解決方案
我是用vuex數(shù)據倉庫來存儲詞條的，當詞條改變時，修改數(shù)據倉庫里的詞條
然后在.vue頁面里監(jiān)聽這個詞條，當詞條改變時觸發(fā)請求數(shù)據的事件
代碼
數(shù)據倉庫store.js
import Vue from 'vue' import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
searchKey: '' //存庫詞條的變量
},
mutations: { //修改數(shù)據倉庫的事件
changeSearchKey(state,value){
state.searchKey = value
}
},
actions: { //推薦使用的異步修改數(shù)據倉庫
setSearchKey(context,value){
context.commit('changeSearchKey',value)
}
}
})App.vue里的header組件
goSearch: function(){
if(this.value){
this.$store.dispatch('setSearchKey',this.value) //當輸入詞條時，將詞條更新到數(shù)據倉庫
}
},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)聽的示例分析”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注創(chuàng)新互聯(lián)行業(yè)資訊頻道！
網站名稱：vueApp.vue中公共組件改變值觸發(fā)其他組件或.vue頁面監(jiān)聽的示例分析
本文地址：http://m.jiaotiyi.com/article/ijjhsp.html