vue App.vue中的公共组件改变值触发其他组件或.vue页面监听


Posted in Javascript onMay 31, 2019

业务场景重现

现在我的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页面监听,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
ext 同步和异步示例代码
Sep 18 Javascript
JQuery 遮罩层实现(mask)实现代码
Jan 09 Javascript
两个数组去重的JS代码
Dec 04 Javascript
js完美解决IE6不支持position:fixed的bug
Apr 24 Javascript
JS与jQ读取xml文件的方法
Dec 08 Javascript
学习使用bootstrap3栅格系统
Apr 12 Javascript
javascript正则表达式中分组详解
Jul 17 Javascript
Js获取当前日期时间及格式化代码
Sep 17 Javascript
VueJS全面解析
Nov 10 Javascript
swiper实现异形轮播效果
Nov 28 Javascript
JavaScript中CreateTextFile函数
Aug 30 Javascript
antd Form组件方法getFieldsValue获取自定义组件的值操作
Oct 29 Javascript
微信小程序环境下将文件上传到OSS的方法步骤
May 31 #Javascript
Vue Router history模式的配置方法及其原理
May 30 #Javascript
vue-cli3+ts+webpack实现多入口多出口功能
May 30 #Javascript
详解Vue项目引入CreateJS的方法(亲测可用)
May 30 #Javascript
了解JavaScript函数中的默认参数
May 30 #Javascript
Element-ui中元素滚动时el-option超出元素区域的问题
May 30 #Javascript
轻松学习JavaScript函数中的 Rest 参数
May 30 #Javascript
You might like
教你IIS6的PHP最佳配置方法
2006/09/05 PHP
php2html php生成静态页函数
2008/12/08 PHP
php array_search() 函数使用
2010/04/13 PHP
PHP rawurlencode与urlencode函数的深入分析
2013/06/08 PHP
php curl请求信息和返回信息设置代码实例
2015/04/27 PHP
Laravel中批量赋值Mass-Assignment的真正含义详解
2017/09/29 PHP
jQuery focus和blur事件的应用详解
2014/01/26 Javascript
Js保留小数点的4种效果实现代码分享
2014/04/12 Javascript
拥Bootstrap入怀——导航栏篇
2016/05/30 Javascript
在ABP框架中使用BootstrapTable组件的方法
2017/07/31 Javascript
浅谈express 中间件机制及实现原理
2017/08/31 Javascript
vue多种弹框的弹出形式的示例代码
2017/09/18 Javascript
vue编译打包本地查看index文件的方法
2018/02/23 Javascript
JavaScript生成指定范围的时间列表
2018/03/19 Javascript
js 数组详细操作方法及解析合集
2018/06/01 Javascript
解决Vue router-link绑定事件不生效的问题
2020/07/22 Javascript
Node.js利用Express实现用户注册登陆功能(推荐)
2020/10/26 Javascript
Python数据类型详解(三)元祖:tuple
2016/05/08 Python
pandas 读取各种格式文件的方法
2018/06/22 Python
python tools实现视频的每一帧提取并保存
2020/03/20 Python
PyQt5实现让QScrollArea支持鼠标拖动的操作方法
2019/06/19 Python
python turtle库画一个方格和圆实例
2019/06/27 Python
Django ModelForm组件使用方法详解
2019/07/23 Python
如何实现Django Rest framework版本控制
2019/07/25 Python
keras实现多GPU或指定GPU的使用介绍
2020/06/17 Python
python实现测试工具(一)——命令行发送get请求
2020/10/19 Python
如何快速一次性卸载所有python包(第三方库)呢
2020/10/20 Python
澳洲在线厨具商店:Kitchen Style
2018/05/05 全球购物
3分钟演讲稿
2014/04/30 职场文书
信访稳定工作汇报
2014/10/27 职场文书
2014年纪检工作总结
2014/11/12 职场文书
2015年法制宣传月活动总结
2015/03/26 职场文书
2015年公司保安年终工作总结
2015/05/14 职场文书
对讲机的最大通讯距离是多少
2022/02/18 无线电
MySQL性能指标TPS+QPS+IOPS压测
2022/08/05 MySQL
Mysql如何查看是否使用到索引
2022/12/24 MySQL