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 相关文章推荐
Json对象与Json字符串互转(4种转换方式)
Mar 27 Javascript
node.js中的fs.link方法使用说明
Dec 15 Javascript
JS表的模拟方法
Feb 05 Javascript
Bootstrap导航栏各元素操作方法(表单、按钮、文本)
Dec 28 Javascript
JS判断图片是否加载完成方法汇总(最新版)
May 13 Javascript
JavaScript重定向URL参数的两种方法小结
Oct 19 Javascript
canvas 画布在主流浏览器中的尺寸限制详细介绍
Dec 15 Javascript
Node.js连接MongoDB数据库产生的问题
Feb 08 Javascript
微信小程序 合法域名校验出错详解及解决办法
Mar 09 Javascript
详解vue渲染函数render的使用
Dec 12 Javascript
你点的 ES6一些小技巧,请查收
Apr 25 Javascript
vue双击事件2.0事件监听(点击-双击-鼠标事件)和事件修饰符操作
Jul 27 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 大数据量及海量数据处理算法总结
2011/05/07 PHP
PHP实现时间轴函数代码
2011/10/08 PHP
php获取当前时间的毫秒数的方法
2014/01/26 PHP
仅IE不支持setTimeout/setInterval函数的第三个以上参数
2011/05/25 Javascript
IE6、IE7中setAttribute不支持class/for/rowspan/colspan等属性
2011/08/28 Javascript
jQuery EasyUI API 中文文档 - ProgressBar 进度条
2011/09/29 Javascript
EasyUI中的tree用法介绍
2011/11/01 Javascript
Javascript中Array用法实例分析
2015/06/13 Javascript
jQuery formValidator表单验证
2016/01/07 Javascript
基于jQuery实现仿QQ空间送礼物功能代码
2016/05/24 Javascript
全面了解函数声明与函数表达式、变量提升
2016/08/09 Javascript
Bootstrap表格制作代码
2017/03/17 Javascript
JavaScript字符串转数字的5种方法及遇到的坑
2018/07/16 Javascript
vue使用rem实现 移动端屏幕适配
2018/09/26 Javascript
vue计算属性无法监听到数组内部变化的解决方案
2019/11/06 Javascript
Vue封装全局过滤器Filters的步骤
2020/09/16 Javascript
nuxt.js 在middleware(中间件)中实现路由鉴权操作
2020/11/06 Javascript
[01:31](回顾)杀出重围,决战TI之巅
2014/07/01 DOTA
Python标准库之随机数 (math包、random包)介绍
2014/11/25 Python
Django imgareaselect手动剪切头像实现方法
2015/05/26 Python
python+Django+pycharm+mysql 搭建首个web项目详解
2019/11/29 Python
TensorFlow获取加载模型中的全部张量名称代码
2020/02/11 Python
python中的django是做什么的
2020/07/31 Python
降低python版本的操作方法
2020/09/11 Python
python自动打开浏览器下载zip并提取内容写入excel
2021/01/04 Python
美津浓美国官网:Mizuno美国
2018/08/07 全球购物
日本化妆品植村秀俄罗斯官方网站:Shu Uemura俄罗斯
2020/02/01 全球购物
上海天奕面试题笔试题
2015/04/19 面试题
What's the difference between an interface and abstract class? (接口与抽象类有什么区别)
2012/10/29 面试题
财务支持类个人的自我评价
2014/02/14 职场文书
奥利奥广告词
2014/03/20 职场文书
办公室领导干部作风整顿个人整改措施
2014/09/17 职场文书
朋友离别感言
2015/08/04 职场文书
python实现简单的井字棋
2021/05/26 Python
MySQL如何使备份得数据保持一致
2022/05/02 MySQL
HTML5中的DOCUMENT.VISIBILITYSTATE属性详解
2023/05/07 HTML / CSS