vue App.vue里的公共组件改变值触发其他组件或.vue页面监听
栏目: JavaScript · 发布时间: 5年前
内容简介:解决方案我是用vuex数据仓库来存储词条的,当词条改变时,修改数据仓库里的词条然后在.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) } } },
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网
猜你喜欢:本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
HTML 压缩/解压工具
在线压缩/解压 HTML 代码
Markdown 在线编辑器
Markdown 在线编辑器