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动态在form上插入enctype=multipart/form-data的问题
May 24 Javascript
jquery创建表格(自动增加表格)代码分享
Dec 25 Javascript
js校验表单后提交表单的三种方法总结
Feb 28 Javascript
三种检测iPhone/iPad设备方向的方法
Apr 23 Javascript
详解JavaScript中的异常处理方法
Jun 16 Javascript
深入解读JavaScript中的Hoisting机制
Aug 12 Javascript
jQuery mobile转换url地址及获取url中目录部分的方法
Dec 04 Javascript
ajax实现加载页面、删除、查看详细信息 bootstrap美化页面!
Mar 14 Javascript
详解Angular5 服务端渲染实战
Jan 04 Javascript
浅析vue-router原理
Oct 19 Javascript
详解VUE里子组件如何获取父组件动态变化的值
Dec 26 Javascript
vue中监听路由参数的变化及方法
Dec 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
PHP 常用数组内部函数(Array Functions)介绍
2013/06/05 PHP
ThinkPHP模型详解
2015/07/27 PHP
ThinkPHP中类的构造函数_construct()与_initialize()的区别详解
2017/03/13 PHP
Smarty模板变量与调节器实例详解
2019/07/20 PHP
告诉大家什么是JSON
2008/06/10 Javascript
基于JQuery框架的AJAX实例代码
2009/11/03 Javascript
基于jquery的放大镜效果
2012/05/30 Javascript
js获取 type=radio 值的方法
2014/05/09 Javascript
JS简单计算器实例
2015/01/20 Javascript
整理一下常见的IE错误
2016/11/18 Javascript
ES6新特性之数组、Math和扩展操作符用法示例
2017/04/01 Javascript
自带气泡提示的vue校验插件(vue-verify-pop)
2017/04/07 Javascript
vue实现点击当前标签高亮效果【推荐】
2018/06/22 Javascript
express + jwt + postMan验证实现持久化登录
2019/06/05 Javascript
vue实现简单的日历效果
2020/09/24 Javascript
Vue中对iframe实现keep alive无刷新的方法
2019/07/23 Javascript
package.json各个属性说明详解
2020/03/11 Javascript
[36:33]2018DOTA2亚洲邀请赛 4.3 突围赛 EG vs Newbee 第二场
2018/04/04 DOTA
[11:44]Ti9 OG夺冠时刻
2019/08/25 DOTA
[01:20:05]DOTA2-DPC中国联赛 正赛 Ehome vs VG BO3 第二场 2月5日
2021/03/11 DOTA
举例详解Python中threading模块的几个常用方法
2015/06/18 Python
python冒泡排序简单实现方法
2015/07/09 Python
Python不使用int()函数把字符串转换为数字的方法
2018/07/09 Python
Python实现统计英文文章词频的方法分析
2019/01/28 Python
详细介绍Python进度条tqdm的使用
2019/07/31 Python
使用TensorFlow-Slim进行图像分类的实现
2019/12/31 Python
python实现单机五子棋
2020/08/28 Python
世界上最大的家庭自动化公司:Smarthome
2017/12/20 全球购物
德国运动营养和健身网上商店:Myprotein.de
2018/07/18 全球购物
Under Armour安德玛英国官网:美国高端运动科技品牌
2018/09/17 全球购物
Marc O’Polo俄罗斯官方在线商店:德国高端时尚品牌
2019/12/26 全球购物
Ibatis如何使用动态表名
2015/07/12 面试题
国际商务专业毕业生自我鉴定2014
2014/09/27 职场文书
酒店管理专业毕业生自我鉴定
2014/09/29 职场文书
市直属机关2016年主题党日活动总结
2016/04/05 职场文书
Go语言基础map用法及示例详解
2021/11/17 Golang