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页面监听,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！
相关文章
vue-seamless-scroll 实现简单自动无缝滚动且添加对应点击事件的简单整理
vue-seamless-scroll是一个基于Vue.js的简单无缝滚动组件, 基于requestAnimationFrame实现,配置多满足多样需求，目前支持上下左右无缝滚动，单步滚动，及支持水平方向的手动切换功能，本节介绍，vue添加 vue-seamless-scroll实现自动无缝滚动的效果，并对应添加点击事件2023-01-01
这篇文章主要介绍了解决vue路由name同名,路由重复的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-08-08
vue利用vue meta info设置每个页面的title与meta信息
这篇文章主要给大家介绍了关于vue如何利用vue meta info设置每个页面的title与meta信息的相关资料,文中将实现的方法介绍的非常详细,对大家学习或者使用vue具有一定的参考学习价值,需要的朋友可以参考下2021-10-10
这篇文章主要介绍了vue2.0 如何把子组件的数据传给父组件,需要的朋友可以参考下2018-01-01
mpvue中配置vuex并持久化到本地Storage图文教程解析
这篇文章主要介绍了mpvue中配置vuex并持久化到本地Storage的教程详解,# 配置vuex和在vue中相同，只是mpvue有一个坑，就是不能直接在new Vue的时候传入store。本文分步骤给大家介绍的非常详细，需要的朋友参考下吧2018-03-03
工作中遇到一个需求是根据日历查看某一天/某一周/某一月的睡眠报告，但是找了好多日历组件都不是很符合需求，只好自己手写一个日历组件，顺便记录一下，希望对大家有所帮助2023-04-04
Vue+Video.js实现视频抽帧并返回抽帧图片Base64
这篇文章主要为大家详细介绍了Vue如何利用Video.js实现视频抽帧并返回抽帧图片Base64,文中的示例代码讲解详细,感兴趣的小伙伴可以了解下2024-01-01
Vue中watch、computed、updated三者的区别及用法
这篇文章主要介绍了Vue中watch、computed、updated三者的区别及用法说明，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-07-07
在 Vue3 中，有许多与响应式相关的函数，例如 toRef、toRefs、isRef、unref 等等,本文将详细介绍这些函数的用法，让我们在实际开发中知道应该使用哪些 API 并能够熟练地回答面试官的相关问题2023-08-08
本篇文章主要介绍了使用 async-validator 编写 Form 组件的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-01-01
最新评论