vueApp.vue中公共组件改变值触发其他组件或.vue页面监听的示例分析
这篇文章主要为大家展示了“vue App.vue中公共组件改变值触发其他组件或.vue页面监听的示例分析”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“vue App.vue中公共组件改变值触发其他组件或.vue页面监听的示例分析”这篇文章吧。
成都创新互联公司主营奉化网站建设的网络公司,主营网站建设方案,成都app软件开发,奉化h5重庆小程序开发搭建,奉化网站营销推广欢迎奉化等地区企业咨询
业务场景重现
现在我的App.vue里面有一个头部的公共组件,头部组件里有一个输入框,当我输入词条时,将词条传进App.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页面监听的示例分析”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注创新互联行业资讯频道!
网站名称:vueApp.vue中公共组件改变值触发其他组件或.vue页面监听的示例分析
文章转载:http://pwwzsj.com/article/ijjhsp.html