1. Transfer value from parent component to child component

1. Parameter name to be passed for the label binding of subcomponent

2. Use props to receive parameters on the sub component page 

2. Transfer value from child component to parent component
 

Use $emit to trigger a custom event and pass a parameter 

2. Listen to the custom event in the child tag of the parent component and add a processing method to respond to the event

3. For non parent-child components to transmit values, a public instance file bus.js should be defined to transmit values as an intermediate warehouse. Otherwise, the effect of transmitting values cannot be achieved between routing components.

Bus / observer mode

public bus.js 

//bus.js import Vue from 'vue' 

export default new Vue() 

//Component A: 
<template> 
  <div> A assembly: <span>{{elementValue}}</span> <input type="button" value="Click trigger" @click="elementByValue">
   </div> 
</template> 
<script> // Introduce public bug s as a tool for communication
 import Bus from './bus.js' 
export default { 
    data () { 
       return { elementValue: 4 } },
       methods: { 
         elementByValue: function () { 
            Bus.$emit('val', this.elementValue) } 
} } 
</script> 
//Component B:
 <template>
   <div> B assembly: <input type="button" value="Click trigger" @click="getData"> 
    <span>{{name}}</span> 
   </div> 
</template> 
<script> 
  import Bus from './bus.js' 
   export default { 
      data () { 
        return { name: 0 } 
      }, 
      mounted: function () { 
            var vm = this // Receive parameters with $on event 
            Bus.$on('val', (data) => {
               console.log(data) vm.name = data }) 
      }, 
      methods: { 
           getData: function () { this.name++ }
      }
    } 
</script>

4. Page Jump transfer value

Method 1: query value is directly added after to in the router link tag 

Method 2: params value transfer: add in router link

5.vuex global management status

import Vue from 'vue'
 import Vuex from 'vuex'
 // Declare a state first
 const state = {
    msg: ''
 }
 // Then register an event handler for actions. When this function is triggered, submit the status to mutaions for processing
 const actions = {
    saveName({commit}, msg) {
        commit('saveMsg', msg)    // Submit to residences for processing    
    }
 }
 // Update state
 const mutations = {
     saveMsg(state, msg) {
        state.msg = msg;
    }
 }
 // Get status information
 const getter = {
    showState(state) {
        console.log(state.msg)
    }
 }


 // The following is quite critical. All modules, remember that they are all, and can only be used after registration
 export default new Vuex.Store({
    state,
    getter,
    mutations,
    actions
 })
//Step 2: use in subcomponents (save input)

//Specifically, I use it in c-form:

<template>
    <div>
        <input type="text" @blur=saveName(username) v-model="username" placeholder="Your name">
    </div>
</template>

<script type="text/javascript">
  // It's important to introduce mapActions
  import { mapActions } from 'vuex'
  export default {
    data() {
      return {
        username:'',
        password: ''
      }
    },
    methods: {
      ...mapActions({
        // Trigger the callback in the blur event of the input and return the input value as a parameter to the store
        saveName: 'saveName' 
      })
    }
  }
</script>
//Step 3: get the input value in step 2 (get state)

<template>
  <div id="login">
    <c-header></c-header>
    <c-form></c-form>
    <p class="content-block"><a href="javascript:;" @click=showState class="button button-fill button-success">Sign in</a></p>
  </div>
</template>

<script>
// It's important to introduce mapGtters
import { mapGetters } from 'vuex'
  export default {
    methods: {
      ...mapGetters([
        // getters registered in store.js
        'showState'
      ])
    },
    components: {
      "c-form": require('../components/form.vue'),
      "c-header": require('../components/header.vue')
    }
  }
</script>

6.localstorage