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

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

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

業(yè)務場景重現(xiàn)

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

解決思路如下：

1.如何拿到頭部的詞條

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

解決方案

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

然后在.vue頁面里監(jiān)聽這個詞條，當詞條改變時觸發(fā)請求數(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) //當輸入詞條時，將詞條更新到數(shù)據(jù)倉庫
      }
    },

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

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

  },

總結

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

相關文章

最新評論