Detailed explanation of the value transfer method between vue components

The value transfer between components is divided into two categories

1. Passing value during component transition (passing value between brother components)

2. Passing values ​​between parent and child components

3. Pass value through Vuex

1. Passing values ​​between sibling components

Solution:
use params and query to pass values

A component

1.A页面中的代码this.$router.push({name: 'XXX', params: {id: id}})
或
this.$router.push({path: '/XXX',name:'XXX  query: {id: id}})

Page B

id :this.$route.params.id 
或
id :this.$route.query.id

Passing parameters through query, the data will not disappear after the page is refreshed. But params will disappear after refreshing!`

But if you want to pass values ​​through pramas and the page data does not disappear, you only need to add the corresponding parameters to the path in the routing configuration.
Example: (name:'XXX',path:'/XXX/:id',component:XXX)

However, the URL of the page passed through the query will display the information of the passed parameters, while params will not.

Summarize params and query:
Security: params will not display the passed parameter information on the url. If it is important information, it is recommended to use params.
Convenience: query does not need to reconfigure the routing to achieve refresh parameters not disappear
. The characteristics of parmas and query are the above These, you can use them as needed (๑•̀ㅂ•́)و✧

2. Passing values ​​between parent and child components

例子：（父组件中注册的子组件）

        <pagination-font  
        :totalCount="totalCount"  
        :currentPath="currentPath"  
        @paging="otherData"        
        ></pagination-font>

1. The parent component passes the value to the child component

Parent component

':totalCount': the parameter that the child component needs to
accept'totalCount': the parameter passed by the parent component

Subassembly

Accept values ​​through props

  props: {
      totalCount:  { 
      type: Number,      //接受值的类型
           default: 0    //默认值
           } 
      }

2. The child component passes the value to the parent component

Subassembly

Customize an event and pass it to the parent component

     this.$emit("paging", response.data.allData.list);

Parent component

Add the statement of the accept method to the registered subcomponent

@paging="OtherData"

@paging is a method that accepts child component definitions (equivalent to a bridge connecting parent and child components)

otherData is the method defined by the parent component

    OtherData(data) {
          this.messageList = data;  // data==response.data.allData.list
           }

3. Pass parameters through Vuex

Vuex is equivalent to a public place. If you want to pass parameters, you only need to
read and write the data in vuex.

• First define the data in vuex

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

const state = {    
table:""
}  

const mutations = { 
    GET_TABLE:(state,data)=>{   state.table=data  }
    }
    
const actions = {}
export default new Vuex.Store({ 
   state, 
   mutations,
   actions
   })

• Write data

this.$store.commit("GET_TABLE",table)

• Read the data

this.$store.state.table

Everyone feels it is very convenient to use vuex ︿(￣︶￣)︿

ps: As for the installation and configuration of vuex, there will be a tutorial later (#`O')