Vue2 component communication

onePass the value through props

1. The father the son

    // child
    props: {msg: String}
    
    // parent
    <HelloWord msg="I'm the message module."></HelloWord>
Copy the code

2. The father

    // child
    this.$emit("change"."I am the value of the child component.")
    
    // parent
    <HelloWord @change="fuChange"></HelloWord>
    
    methods: {
        fuChange(msg) {
            console.log(msg)
        }
    }
Copy the code

twoValues are passed through the event bus

1. Make a bus. js file

    // Define a bus.js file
    class Bus {
        constructor {
            // Collect all events
            this.callBack = {}
        }
        
        $on(name,fn) {
             this.callback[name] = this.callback[name] || []
             this.callBack[name].push(fn)
        }
        
        $emit(name,args) {
            if(this.callback[name]) {
                this.callback[name].forEach(cb= > cb(args))
            }
            
        }
        
    } 
Copy the code

2. Import in main.js

    import Bus form './Bus.js'

    Vue.protoType.$Bus = new Bus()
Copy the code

3. Call $on in the component you want to listen on

    this.$bus.$on('foo',handle)
Copy the code

4. Invoke $emit in the component that needs to trigger

    this.$bus.$emit('foo',args)
Copy the code

3.Value is transmitted through vuEX

1. Install vuex

    npm i vuex --save
Copy the code

2. Create a store. Js

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


     // All modules are registered to use
     export default new Vuex.Store({
        state,
        getter,
        mutations,
        actions
     })
Copy the code

3. Use it in components that need to be triggered

     import { mapActions } from 'vuex'
     
     methods: {
      ...mapActions({
        saveName: 'saveName'})}Copy the code

4. Use it in components that need to be updated

     import { mapGetters } from 'vuex'
     
     methods: {
      ...mapGetters([
        'showState'])},Copy the code

Four.$parent/$root

    // Sibling components can communicate via common ancestor bypass
    
    // brother1
    this.$parent.$on('foo',handle)
    
    // brother2
    this.$parent.$emit('foo')
Copy the code

Five.$listeners are uploaded via $attrs/$listeners

    // contains property bindings (except class and style) that are not recognized (and retrieved) as prop in the parent scope.
    // When a component does not declare any prop, it contains all parent scope bindings (except class and style),
    // Internal components can also be passed in with vbind="$attrs" -- useful when creating higher-level components.
    
    
    // child: foo is not declared in props
    <p>{{$attrs.foo}}</p>
    
    // parent
    <HelloWorldfoo="foo"/>
Copy the code

Six.Provide /inject value (cross-generation)

    // Define the parameters to pass in the parent component
    provide(){return {foo: 'foo'}}
    inject: ['foo']
Copy the code
    // Used in child components
    inject: ['foo']
Copy the code