交流群:462197261站长百科站长论坛热门标签收藏本站北冥有鱼 互联网前沿资源第一站 助力全行业互联网+
点击这里给我发消息
  • 当前位置:
  • 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进行事件监听数据传递的方法

    广而告之:
    热门推荐:
    php导入excel文件到mysql数据库的方法

    本文实例讲述了php导入excel文件到mysql数据库的方法。分享给大家供大家参考。具体分析如下: php导入excel文件入mysql数据库我们是需一借助一个phpexcel类文件了,有了这个类文件我们就可以快速简单的导入excel到mysql数据库中,这里就来举个例子给大家说明一下具体用法. 导入前···

    BooStrap对导航条的改造实践小结

    制作导航(基础样式)需要如下几部: 第一步:首先在制作导航的列表(<ul class=”nav nav-tabs”> 当然nav-tabs是用来控制样式的我们可以选择比如nav-pills) 第二步:在列表里面添加自己的链接 <ul class="nav nav-tabs"> <li><a href="index.html" class=···

    PHP服务端环境搭建的图文教程(分享)

    一、PHP服务端环境搭建 1.php 服务端环境 安装套件 xampp(apach+mysql+php解释器) F:\MyDoc文件(重要)\DL_学习\download重要资源\apache服务器组件 安装 此时进入xmapp面板显示成功运行 测试本地Apache服务器是否开启:浏览器中输入127.0.0.1 回车即可进入xmapp官网 4.修改浏···

    GridView自定义删除操作的具体方法

    首先,我们前端的代码如下: 复制代码 代码如下:<asp:GridView ID="gridViewDxjk" CssClass="gridview" runat="server" AllowPaging="True"                   DataKeyNames="···

    CSS3区域模块region相关编写示例

    印刷媒体,例如一本杂志或一份报纸,相比网站最大的优势是完全灵活的安排页面和段落布局。例如,印刷媒体已经能够优雅地在多个列中填充内容,甚至复杂到如下面屏幕截图所示。 然而,由于Web的内容结构,试图在web上模仿类似的布局非常棘手。为了使页面布局更加灵活到如印刷媒体一般···

    jQuery实现列表的增加和删除功能

    具体代码如下所示: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jQuery</title> <style> </style> </head> <body> <div> <table style="margin: 10px auto···

    帝国cms电影模型内容页调用播放器类型的几种方法

    一、以图片形式显示 1、在/skin/xin/v/中增加几个播放器的图片 ①图片格式自己定,如:增加了ico的格式,在:系统-系统设置-系统参数设置-文件设置-后台上传文件扩展名-添加ico的图片格式 ②图片的命名:以播放器的ID命名(ID参考:后台-其他-下载模型相关-播放器管理-看播···

    asp.net+js实现金额格式化

    根据用户需求,在输入金额时要格式化,即每三位数字加逗号分隔,并保留两位小数。 考虑到用户的体验,随使用JS对金额进行格式化,前台代码如下: 复制代码 代码如下: <asp:TextBox ID="txtAmount" runat="server" onkeypress="check()" onkeyup="run(this)"></asp:Tex···

    jquery实现表单验证简单实例演示

    本文实例讲述了jquery实现表单验证代码。分享给大家供大家参考。具体如下: 运行效果截图如下: 具体代码如下: 直接上插件实现代码了,围绕代码进行讲解比较容易点: /* 描述:基于jquery的表单验证插件。 */ (function ($) { $.fn.checkForm = function (options) { v···

    编写PHP脚本过滤用户上传的图片

    示例   下载 我在phpclasses.org上面偶然发现一个很有用的,由Bakr Alsharif开发的可以帮助开发者基于皮肤像素点来检测图片裸照的类文件. 它会分析在一张图片的不同部分使用的颜色,并决定其是否匹配人类皮肤颜色的色调. 作为分析的结果,他会返回一个反映图片包含裸···