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 相关文章推荐
自用js开发框架小成 学习js的朋友可以看看
Nov 16 Javascript
jquery图片上下tab切换效果
Mar 18 Javascript
关于hashchangebroker和statehashable的补充文档
Aug 08 Javascript
getJSON调用后台json数据时函数被调用两次的原因猜想
Sep 29 Javascript
深入浅析同源策略和跨域访问
Nov 26 Javascript
Javascript中构造函数要注意的一些坑
Jan 23 Javascript
Bootstrap3 多个模态对话框无法显示的解决方案
Feb 23 Javascript
Angular中ng-bind和ng-model的区别实例详解
Apr 10 Javascript
在vue.js中抽出公共代码的方法示例
Jun 08 Javascript
微信小程序实现的涂鸦功能示例【附源码下载】
Jan 12 Javascript
详解html-webpack-plugin用法全解
Jan 22 Javascript
react项目实践之webpack-dev-serve
Sep 14 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
简单的用PHP编写的导航条程序
2006/10/09 PHP
dede3.1分页文字采集过滤规则详说(图文教程)续四
2007/04/03 PHP
生成ubuntu自动切换壁纸xml文件的php代码
2010/07/17 PHP
PHP curl伪造IP地址和header信息代码实例
2015/04/27 PHP
prototype 1.5相关知识及他人笔记
2006/12/16 Javascript
Query中click(),bind(),live(),delegate()的区别
2013/11/19 Javascript
基于jquery异步传输json数据格式实例代码
2013/11/23 Javascript
JavaScript插件化开发教程(六)
2015/02/01 Javascript
jQuery实现仿QQ在线客服效果的滚动层代码
2015/10/15 Javascript
浅析JavaScript声明变量
2015/12/21 Javascript
react native实现往服务器上传网络图片的实例
2017/08/07 Javascript
vue element-ui 绑定@keyup事件无效的解决方法
2018/03/09 Javascript
关于Google发布的JavaScript代码规范你要知道哪些
2018/04/04 Javascript
vue2.0 资源文件assets和static的区别详解
2018/04/08 Javascript
jQuery 函数实例分析【函数声明、函数表达式、匿名函数等】
2020/05/19 jQuery
[01:01:14]完美世界DOTA2联赛PWL S2 SZ vs Rebirth 第一场 11.21
2020/11/23 DOTA
Python基于dom操作xml数据的方法示例
2018/05/12 Python
解决PyCharm同目录下导入模块会报错的问题
2018/10/13 Python
pyqt5使用按钮进行界面的跳转方法
2019/06/19 Python
python错误调试及单元文档测试过程解析
2019/12/19 Python
详解python定时简单爬取网页新闻存入数据库并发送邮件
2020/11/27 Python
用css3实现当鼠标移进去时当前亮其他变灰效果
2014/04/08 HTML / CSS
法国创作个性化T恤衫和其他定制产品平台:Tostadora
2018/04/08 全球购物
英国最大最好的无人机商店:Drones Direct
2019/07/12 全球购物
如何转换一个字符串到enum值
2014/04/12 面试题
介绍一下MYSQL常用的优化技巧
2012/10/25 面试题
如何防止同一个帐户被多人同时登录
2013/08/01 面试题
在校硕士自我鉴定
2014/01/23 职场文书
学雷锋活动倡议书
2014/08/30 职场文书
领导班子在批评与自我批评座谈会上的发言
2014/09/28 职场文书
介绍信范文
2015/01/31 职场文书
教师工作态度自我评价
2015/03/05 职场文书
慈善募捐倡议书
2015/04/27 职场文书
2016教师年度考核评语大全
2015/12/01 职场文书
话题作文之学会尊重
2019/12/16 职场文书
Vue.js中v-for指令的用法介绍
2022/03/13 Vue.js