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 相关文章推荐
jQuery 1.2.x 升? 1.3.x 注意事项
May 06 Javascript
javascript标签在页面中的位置探讨
Apr 11 Javascript
jQuery实现带滚动线条导航效果的方法
Jan 30 Javascript
微信小程序 action-sheet底部菜单详解
Oct 27 Javascript
JS实现DIV高度自适应窗口示例
Feb 16 Javascript
解决VUEX刷新的时候出现数据消失
Jul 03 Javascript
Vue实现virtual-dom的原理简析
Jul 10 Javascript
微信小程序引用iconfont图标的方法
Oct 22 Javascript
vue.js实现的幻灯片功能示例
Jan 18 Javascript
JS中比Switch...Case更优雅的多条件判断写法
Sep 05 Javascript
vue路由 遍历生成复数router-link的例子
Oct 30 Javascript
Layui弹框中数据表格中可双击选择一条数据的实现
May 06 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
遍历echsop的region表形成缓存的程序实例代码
2016/11/01 PHP
PHP开发api接口安全验证操作实例详解
2020/03/26 PHP
向fckeditor编辑器插入指定代码的方法
2007/05/25 Javascript
编写跨浏览器的javascript代码必备[js多浏览器兼容写法]
2008/10/29 Javascript
ExtJS 2.0实用简明教程 之Border区域布局
2009/04/29 Javascript
Prototype Array对象 学习
2009/07/19 Javascript
JavaScript面向对象之Prototypes和继承
2012/07/12 Javascript
jQuery随机密码生成的方法
2015/03/09 Javascript
下雪了 javascript实现雪花飞舞
2020/08/02 Javascript
JS动态给对象添加属性和值的实现方法
2016/10/21 Javascript
jQuery实现倒计时重新发送短信验证码功能示例
2017/01/12 Javascript
AngularJS的ng-repeat指令与scope继承关系实例详解
2017/01/21 Javascript
JavaScript实现短信倒计时60s
2017/10/09 Javascript
JS+HTML+CSS实现轮播效果
2017/11/28 Javascript
JavaScript实现的简单Tab点击切换功能示例
2018/07/06 Javascript
JavaScript运动原理基础知识详解
2020/04/02 Javascript
Django1.3添加app提示模块不存在的解决方法
2014/08/26 Python
python删除列表内容
2015/08/04 Python
Python实现Kmeans聚类算法
2020/06/10 Python
python3 爬取图片的实例代码
2018/11/06 Python
django之对FileField字段的upload_to的设定方法
2019/07/28 Python
python3中eval函数用法使用简介
2019/08/02 Python
Python3.7安装keras和TensorFlow的教程图解
2020/06/18 Python
Python+Dlib+Opencv实现人脸采集并表情判别功能的代码
2020/07/01 Python
matplotlib之pyplot模块坐标轴标签设置使用(xlabel()、ylabel())
2021/02/22 Python
Tiqets荷兰:出售欧洲最美丽的景点和博物馆门票
2018/01/09 全球购物
Java中的类包括什么内容?设计时要注意哪些方面
2012/05/23 面试题
建筑施工安全责任书
2014/07/24 职场文书
学校党员对照检查材料
2014/08/28 职场文书
我的中国梦主题教育活动总结
2015/05/07 职场文书
诚信教育主题班会
2015/08/13 职场文书
男方家长婚礼答谢词
2015/09/29 职场文书
MySQL中存储时间的最佳实践指南
2021/07/01 MySQL
Javascript之datagrid查询详解
2021/09/15 Javascript
JAVA SpringMVC实现自定义拦截器
2022/03/16 Python
Python爬虫网络请求之代理服务器和动态Cookies
2022/04/12 Python