vue App.vue中的公共组件改变值触发其他组件或.vue页面监听
更新时间：2019年05月31日 08:27:59 作者：听风语
这篇文章主要介绍了vue App.vue里的公共组件改变值触发其他组件或.vue页面监听,本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
业务场景重现
现在我的App.vue里面有一个头部的公共组件，头部组件里有一个输入框，当我输入词条时，将词条传进App.vue里的<router-view>里的.vue页面，并进行查询获取数据
解决思路如下：
1.如何拿到头部的词条
2.当词条改变时如何触发.vue里的请求数据事件
解决方案
我是用vuex数据仓库来存储词条的，当词条改变时，修改数据仓库里的词条
然后在.vue页面里监听这个词条，当词条改变时触发请求数据的事件
代码
数据仓库store.js
import Vue from 'vue' import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.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(){
return this.$store.state.searchKey
}
},
watch: {
getSearchKey: {
handler(newValue,oldValue){ //当词条改变时执行事件
this.recordis(newValue)
// console.log('new',newValue)
// console.log('old',oldValue)
}
}
},
总结
以上所述是小编给大家介绍的vue App.vue中的公共组件改变值触发其他组件或.vue页面监听,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！
相关文章
本篇文章主要介绍了五分钟搞懂Vuex实用知识，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-08-08
这篇文章主要介绍了浅谈vue-props的default写不写有什么区别，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-08-08
Vue3的el-table-column增加跳转其他页面的方法
文章介绍了如何在Vue3的el-table-column中增加跳转其他页面的功能,并提供了示例代码和handleUpdate方法的源码分析,感兴趣的朋友跟随小编一起看看吧2025-02-02
这篇文章主要介绍了深入理解vue中的$set,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-06-06
这篇文章主要介绍了Vue高级特性概念原理，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习吧2023-03-03
Editor.js是一个用于构建具有完全可定制化块结构的现代编辑器的开源库,它提供了一个简洁、可扩展和易于使用的接口,使开发人员能够创建拥有丰富内容和互动性的编辑器,这篇文章主要给大家介绍了关于vue3使用富文本编辑器Editor.js的简单方法,需要的朋友可以参考下2024-04-04
这篇文章主要介绍了Vue中如何使用方法、计算属性或观察者的相关知识，非常不错，具有一定的参考借鉴价值 ,需要的朋友可以参考下2018-10-10
下面小编就为大家带来一篇使用mint-ui开发项目的一些心得(分享)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-09-09
uniapp-ios开发之App端与webview端相互通信的方法以及注意事项
在uni-app与Webview之间进行数据交互是非常常见的需求,下面这篇文章主要给大家介绍了关于uniapp-ios开发之App端与webview端相互通信的方法以及注意事项的相关资料,需要的朋友可以参考下2024-07-07
本篇文章主要介绍了使用Vue完成一个简单的todolist的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-12-12
最新评论