智能手刺小程序_vue App.vue中的公共组件改变值触

发布时间:2021-01-07 13:22 作者:jianzhan

摘要: vue App.vue中的公共性部件更改值开启别的部件或.vue网页页面监视 本文关键详细介绍了vue App.vue里的公共性部件更改值开启别的部件或.vue网页页面监视,文中给大伙儿详细介绍的十分

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


  • 浅谈无人自助售货未来发

    随着着amazonAmazon Go、淘宝网网造物节“淘现磨现磨咖啡”、“缤果小小盒子”的营销推广营销推广有效合理布局,沒有人零售界定一时变为生产制造制造行业受欢迎语汇,在物联网网网

  • 有谁知道建一个网站需要

    公司企业网站建设务必多少钱钱?越来越越越大的企业基建项目本身的官方网网站,那么对于企业来说,实际上不上解基建项目网站的花销,那么公司企业网站建设务必多少钱钱?下面网编

  • 定制开发网站需要满足的

    高端定制网站考虑到以下规范:1、技术性技术专业计划方案方案策划精锐精英团队按照本身企业公司的产品、特点、以及企业VI这种方面来给自己的网站进行每一个方面的准确立位,最

  • 证件照自助终端机无线联

    一.概述 随着着经济发展发展趋势的快速发展趋势发展趋势,大伙儿的生活起居节奏感感一直在加快。先在国,大伙儿一生务必很多合理有效证件照片,包括真正真实身份证、结婚证、

  • 网站建设如何挑选自助网

    现如今公司企业网站建设的规定越来越越越大,终归现如今是一个互联互联网红人利阶段,对于想基建项目网站的人要有很多,但是有很多的人因为没有技术性技术专业的开发设计设计