VIP用户交流群:462197261 收藏本站北冥有鱼 互联网前沿资源第一站 助力全行业互联网+
在线客服:78895949
tonglan
  • 当前位置:
  • vue App.vue中的公共组件改变值触发其他组件或.vue页面监听

    业务场景重现

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

    您可能感兴趣的文章:

    • vue项目中,main.js,App.vue,index.html的调用方法
    • 解决Vue.js父组件$on无法监听子组件$emit触发事件的问题
    • 使用vue.js在页面内组件监听scroll事件的方法
    • vue使用$emit时,父组件无法监听到子组件的事件实例
    • 详解vuex 中的 state 在组件中如何监听
    • vuejs2.0实现分页组件使用$emit进行事件监听数据传递的方法

    广而告之:
    热门推荐:
    织梦dedecms系统arclist标签调用副栏目文章的方法

    最近一段时间以来,有不少时间都在折腾DEDECMS,对其进行了不少的优化工作,以便其适应我的应用要求。在这其中,也遇到了不少的问题。譬如:DEDECMS根据副栏目进行文章调用的问题。  DEDECMS中一个文章可以同时属于两个栏目,即一个主栏目一个副栏目,{dede:arclist} ···

    Thinkphp框架开发移动端接口(2)

    接着上一篇介绍Thinkphp框架开发移动端接口(1),另外我们还可以通过ThinkPHP实现移动端访问自动切换主题模板,这样也可以做到移动端访问 ThinkPHP的模板主题机制,如果只是在PC,只要需修改 DEFAULT_THEME (新版模板主题默认是空,表示不启用模板主题功能)配置项就可以方便的···

    Mysql主从同步Last

    Mysql主从同步的Last_IO_Errno:1236错误是什么原因呢,我们要如何来解决这个问题呢?下面和小编一起来看看关于此问题的记录与解决办法。 <script>ec(2);</script> 从服务器错误代码: Last_IO_Errno: 1236 Last_IO_Error: Got fatal error 1236 from mast···

    php+curl 发送图片处理代码分享

    //上传页面代码 $url = "http://192.168.1.100/upload.php?lang=cn"; #可以get传相应参数 $file = $path.'/'. $Icon; //要上传的文件 $fields['f'] = '@'.$file; $ch = curl_init(); curl_setopt($ch, CURLOPT_URL, $url ); curl_setopt($ch, CURLOPT_RETU···

    Bootstrap+PHP实现多图上传功能实例详解

    使用bootstrap界面美观,可预览,可拖拽上传,可配合ajax异步或同步上传,下面是效果图: 前端代码:fileinput.html <!DOCTYPE html> <!-- release v4.1.8, copyright 2014 - 2015 Kartik Visweswaran --> <html lang="en"> <head> <meta cha···

    如何将Excel文件导入MySQL数据库

    本文实例为大家分享了Excel文件导入MySQL数据库的方法,供大家参考,具体内容如下 1、简介 本博客给大家分享一个实用的小技能,我们在使用数据库时常常需要将所需的Excel数据添加进去,如果按照传统的方法将会费时费力,所以给大家分享导入Excel数据的技能。 2、实际操作 1)首···

    php 伪静态之IIS篇

    有的win主机IIS不支持 .htaccess 文件, 我在这里指的不是本地 在本地的话用apmserv服务器可以用.htaccess 文件,用apmserv服务器环境配置伪静态可以看 php 伪静态 (url rewrite mod_rewrite 重写) 这篇文章,讲的很详细. 这里我们主要讲解httpd.ini 废话不说直接看效果~ ···

    JavaScript原生实现观察者模式的示例

    观察者模式又叫做发布订阅模式,它定义了一种一对多的关系,让多个观察者对象同时监听某一个主题对象,这个主题对象的状态发生改变时就会通知所有观察着对象。 它是由两类对象组成,主题和观察者,主题负责发布事件,同时观察者通过订阅这些事件来观察该主体,发布者和订阅者是···

    PHP+XML 制作简单的留言本 图文教程

    1. 留言显示页面 2. 发布留言,并允许上传图片 3. 输入密码登录后可以删除留言。 1. 文件目录   upfile是保存上传图片的目录。 2. 主要界面 (1)首页,显示留言页面       (2)发表留言页面   3. XML文档格式,名称为data.xml   各字···

    php像数组一样存取和修改字符串字符

    如获取第二个$str[1]或$str{1} ,不建议使用{},最好使用[]测试如下复制代码 代码如下://获取字符最后一个字符$str = 'phpddt.com';echo $str[strlen($str)-1]; //m//修改第一个字符$str = 'phpddt.com';$str[0] = 'a';  //ahpddt.com//方括号中的数字超出范围将会产···