vue App.vue中的公共组件改变值触发其他组件或.vue页面监听
2019-05-31 08:27
1251 查看
业务场景重现
现在我的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—webapp 解决点击遮罩层会触发界面上其他元素的click事件问题
- vue之在页面中监听键盘的Enter键来触发某个按钮事件
- 使用vue.js在页面内组件监听scroll事件的方法
- 使用vue.js在页面内组件监听scroll事件
- watch监听vuex数据改变,实现自动改变兄弟页面数据
- vue页面中引入其他vue组件
- vue页面父组件滚动触底,子组件触发事件
- 实现点击页面其他地方,隐藏div(vue)
- Vuejs刷新页面子组件数据丢失问题的一点笔记
- ios 显示其他app的购买页面
- Vue框架-基础知识(vue指令、实例生命周期、计算属性与监听属性、插槽理解、组件介绍、数据交互、ES6语法等)
- vue-lazy-render: 延迟渲染大组件,增强页面切换流畅度
- Vue中监听路由变化,来决定是否跳转页面
- Vue.js父与子组件之间传参 父向子组件传参 例子:App.vue为父,引入componetA组件之后,则可以在template中使用标签(注意驼峰写法要改成componet-a写法,因为ht
- 解决element-ui中el-menu组件作为vue-router模式在刷新页面后default-active属性与当前路由页面不一致问题的方法
- 改变grid列和详细页签中xforms组件的显示效果(数据库中真正保存的可能是编号,页面中展现的是名称[X5])
- vue如何引用其他组件(css和js)
- Vue-文章详情页的评论功能(抽取为公共组件-评论组件)
- 12.vue属性.监听.组件