Common components in vue change values ​​trigger other components or .vue page listening

Business scenario reappearance

Now I have a common component of the header, and there is an input box in the header component. When I enter an entry, I pass the entry into the .vue page in <router-view> and search and get the data

The solution is as follows:

1. How to get the head entry

2. How to trigger the request data event in .vue when the entry changes

Solution

I use the vuex data warehouse to store entries. When the entries change, modify the entries in the data warehouse.

Then listen to this entry in the .vue page, and trigger the event requesting data when the entry changes.

Code

Data Warehouse

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

(Vuex)

export default new ({
 state: {
  searchKey: ''    //Variables of inventory entries },
 mutations: {         //Events to modify data warehouse  changeSearchKey(state,value){
    = value
  }
 },
 actions: {         // Recommended asynchronous modification of data warehouse  setSearchKey(context,value){  
   ('changeSearchKey',value)
  }
 }
})

header component in

goSearch: function(){
      if(){
        this.$('setSearchKey',) // When entering an entry, update the entry to the data warehouse      }
    },

Listening to the entry in the vue page

computed: {           Listen to the entry
    getSearchKey(){
      return this.$
    }
  },
  watch: {
    getSearchKey: {
      handler(newValue,oldValue){ //Execute event when the entry changes        (newValue)
        // ('new',newValue)
        // ('old',oldValue)
      }
    }

  },

Summarize

The above is the editor’s introduction to the public component change value in vue that triggers other components or .vue page monitoring. I hope it will be helpful to everyone. If you have any questions, please leave me a message and the editor will reply to everyone in time. Thank you very much for your support for my website!
If you think this article is helpful to you, please reprint it. Please indicate the source, thank you!