vue App.vue中的公共组件改变值触发其他组件或.vue页面监听
业务场景重现
现在我的App.vue里面有一个头部的公共组件，头部组件里有一个输入框，当我输入词条时，将词条传进App.vue里的
解决思路如下：
1.如何拿到头部的词条
2.当词条改变时如何触发.vue里的请求数据事件
解决方案
我是用vuex数据仓库来存储词条的，当词条改变时，修改数据仓库里的词条
然后在.vue页面里监听这个词条，当词条改变时触发请求数据的事件
代码
数据仓库store.js
importVuefrom'vue' importVuexfrom'vuex'
Vue.use(Vuex)
exportdefaultnewVuex.Store({
state:{
searchKey:''//存库词条的变量
},
mutations:{//修改数据仓库的事件
changeSearchKey(state,value){
state.searchKey=value
}
},
actions:{//推荐使用的异步修改数据仓库
setSearchKey(context,value){
context.commit('changeSearchKey',value)
}
}
})
App.vue里的header组件
goSearch:function(){
if(this.value){
this.$store.dispatch('setSearchKey',this.value)//当输入词条时，将词条更新到数据仓库
}
},
vue页面里监听词条
computed:{监听词条
getSearchKey(){
returnthis.$store.state.searchKey
}
},
watch:{
getSearchKey:{
handler(newValue,oldValue){//当词条改变时执行事件
this.recordis(newValue)
//console.log('new',newValue)
//console.log('old',oldValue)
}
}
},
总结
以上所述是小编给大家介绍的vueApp.vue中的公共组件改变值触发其他组件或.vue页面监听,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！
声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。