欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue App.vue中的公共組件改變值觸發(fā)其他組件或.vue頁面監(jiān)聽

 更新時(shí)間：2019年05月31日 08:27:59   作者：聽風(fēng)語  
這篇文章主要介紹了vue App.vue里的公共組件改變值觸發(fā)其他組件或.vue頁面監(jiān)聽,本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

業(yè)務(wù)場(chǎng)景重現(xiàn)

現(xiàn)在我的App.vue里面有一個(gè)頭部的公共組件，頭部組件里有一個(gè)輸入框，當(dāng)我輸入詞條時(shí)，將詞條傳進(jìn)App.vue里的<router-view>里的.vue頁面，并進(jìn)行查詢獲取數(shù)據(jù)

解決思路如下：

1.如何拿到頭部的詞條

2.當(dāng)詞條改變時(shí)如何觸發(fā).vue里的請(qǐng)求數(shù)據(jù)事件

解決方案

我是用vuex數(shù)據(jù)倉庫來存儲(chǔ)詞條的，當(dāng)詞條改變時(shí)，修改數(shù)據(jù)倉庫里的詞條

然后在.vue頁面里監(jiān)聽這個(gè)詞條，當(dāng)詞條改變時(shí)觸發(fā)請(qǐng)求數(shù)據(jù)的事件

代碼

數(shù)據(jù)倉庫store.js

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
 state: {
  searchKey: ''    //存庫詞條的變量
 },
 mutations: {         //修改數(shù)據(jù)倉庫的事件
  changeSearchKey(state,value){
   state.searchKey = value
  }
 },
 actions: {         //推薦使用的異步修改數(shù)據(jù)倉庫
  setSearchKey(context,value){  
   context.commit('changeSearchKey',value)
  }
 }
})

App.vue里的header組件

goSearch: function(){
      if(this.value){
        this.$store.dispatch('setSearchKey',this.value) //當(dāng)輸入詞條時(shí)，將詞條更新到數(shù)據(jù)倉庫
      }
    },

vue頁面里監(jiān)聽詞條

computed: {           監(jiān)聽詞條
    getSearchKey(){
      return this.$store.state.searchKey
    }
  },
  watch: {
    getSearchKey: {
      handler(newValue,oldValue){ //當(dāng)詞條改變時(shí)執(zhí)行事件
        this.recordis(newValue)
        // console.log('new',newValue)
        // console.log('old',oldValue)
      }
    }

  },

總結(jié)

以上所述是小編給大家介紹的vue App.vue中的公共組件改變值觸發(fā)其他組件或.vue頁面監(jiān)聽,希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
如果你覺得本文對(duì)你有幫助，歡迎轉(zhuǎn)載，煩請(qǐng)注明出處，謝謝！

相關(guān)文章

最新評(píng)論