Vue's pass value:

1. Father:

Bind the data to be passed through the V-bind of the sub-component tag of the parent component, and then receive in the sub-component through the PROPS

// parent component
<select-list :dataList="dataArr" @parentReceive="changeVal"/>
    
 // Subassembly 
props: ['dataList']    

12345

2. Submail:

Define a method in subcomponents, then pass through This.emit (EMIT delivery (EMIT has two parameters (data to be transferred)):

// SELECT-LIST component - subcomponents
selectVal (val) {
             // First step
             THIS. $ EMIT ('ParentReceive', VAL) // First Parameters: Custom Event Name; Second Parameter To pass the data
}
12345

Listen to the @ Custom Event Name on the subcomponent tag of the parent component, then derive the logic of the response by the callback function:

// parent component
<template>
	<select-list :dataList="dataArr" @parentReceive="changeVal"/>
 </template>

 <script>
 	 changeVal (val) {
             Console.log (`I am the data passed by the subcomponent $ {VAL}`)
    }  
 </script>
12345678910

3. Central Communication (crossable communication):

In the component to pass the data passes the $ EMIT (custom event name, the data to be passed):

// select - list
import bus from '../../main'
selectVal (val) {
      bus.$emit('reveive', val)
    }
12345

Listening to the reception ON by ON to monitor the reception ON to monitor the reception ON ('Custom Event Name ":

// select - input
import bus from '../../main'
bus.$on('reveive', val => {
      console.log(val)
      this.value = val
 })
123456

All $ EMIT and $ ON are mounted to the Vue empty instance, and this empty instance should be used globally and therefore need to be created in main.js:

// main.js
let bus = new Vue()
export default bus

Use VUEX to pass parameters

The first is to define a property name in State in Vuex.

state:{
  value:""
}

Write in a component

methods:{
  sendvalue(){
	this.$store.dispatch("send","value")
}
}

Write in Vuex

actions:{
  send(context,valuename){
    this.context("sendover",valuename)
  }
}
mutations:{
  sendover(state,valuename){
    this.state.value=valuename
  }
}

Accept in another component

var a = this.$store.state.value