技术文章
当前位置:首页 > vue.js技术文章 > vue App.vue中的公共组件改变值触发其他组件或.vue页面监听

vue App.vue中的公共组件改变值触发其他组件或.vue页面监听的实例

  • 发布时间:
  • 作者:码农之家原创
  • 点击:124

这篇文章主要知识点是关于vue、App.vue、vue页面监听、vue、传值、的内容,如果大家想对相关知识点有系统深入的学习,可以参阅以下电子书

Vue.js项目实战
Vue.js项目实战影印完整版
  • 类型:Vue大小:141 MB格式:PDF出版:人民邮电出版社作者:纪尧姆·周
立即下载

更多Vue相关的学习资源可以参阅 Vue电子书程序设计电子书 等栏目。

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的全部知识点内容总结,大家还可以在下方相关文章里找到vee-validate vue 2.0自定义表单、 小程序/mpvue中使用flyio发起、 vue-cli开发时ajax跨域的方法、 等vue.js文章进一步学习,感谢大家的阅读和支持。

上一篇:vee-validate vue 2.0自定义表单验证的实现方法

下一篇:vue-cli项目中缩短首屏加载时间实例

展开 +

收起 -

相关电子书
学习笔记
网友NO.878930

Mpvue中使用Vant Weapp组件库的方法步骤

一、介绍 mpvue-vant记录了我们团队开发中在mpvue中使用Vant Weapp组件库所踩下的坑,在这里分享给大家,让mpvue开发者可以使用vant组件库进行开发,避免踩不必要的坑。 此教程是在dov-yih一同协助下完成。经过测试,Vant Weapp下所有组件都能够在mpvue中使用 mpvue-vant Github地址 二、使用方法 目前vant已经支持了npm的方式,但是由于node_modules目录下的代码是不会被编进dist目录下的,所以暂时只能用git方式使用。 克隆vant仓库 将dist目录下的所有文件复制到你项目的/static/vant/目录下。 git clone https://github.com/youzan/vant-weapp.git // 当然你也可以克隆本仓库代码,本仓库会与`vant`仓库保持同步。直接将`vant`目录复制到`/static`目录下git clone https://github.com/Rychou/mpvue-vant.git 引入 在需要引入的页面目录下的main.json文件中 { "usingComponents": { "van-button": "/static/vant/button/index", }} 使用……

网友NO.253094

vue在手机中通过本机IP地址访问webApp的方法

vue中通过localhost:8080,就可以访问浏览项目,但是如果改成本机IP则会报错 通过localhost:8080访问效果 通过本机IP显示效果 如果想通过手机输入本机IP访问需要在package.json中配置 package.json配置 最后在手机通过IP就可以访问到webApp,或借助草料二维码生成修改后项目地址的二维码,掏出手机扫一扫即可~ 通过机IP访问效果 Tips:需要手机和电脑在一个局域网(wifi)下 总结 以上所述是小编给大家介绍的vue在手机中通过本机IP地址访问webApp的方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对码农之家网站的支持! ……

网友NO.316705

vue与原生app的对接交互的方法(混合开发)

小伙伴们在用vue开发h5项目特别是移动端的项目,很多都是打包后挂载在原生APP上的,那就少不了与原生交互了,我最近就是在坐这个,踩了一些坑,拿出来给大家分享下。 0.通过url传输数据:(一般是在入口页面传下app的用户信息进来供vue h5使用) methods: { // 接收url后的数据 urltext() { let loc = location.href; 6 let n1 = loc.length;//地址的总长度 let n2 = loc.indexOf("=");//取得=号的位置 let outToken = loc.substr(n2 + 1, n1 - n2);//从=号后面的内容 console.log(loc,n1,n2,outToken) this.outTokenPost(outToken) //传到处理函数 },} 1.原生APP提供一个接口对象的引用(例如一个扫码的接口,可能还有回调函数以获得扫码结果) 思路就是万物通过window 进行交互 // 将vue组件的要回调的函数暴露出去mounted:function(){ // 将subscanQRCallBack方法绑定到window下面,提供给外部调用 window['scanQRCallBack'] = (result) = { ……

<
1
>

Copyright 2018-2019 xz577.com 码农之家

版权责任说明