Commonly used method

1,Props (between parent and child components)

// child <button @click="toParent"> </button> props: $emit('transmit',' transmit')}} $emit('transmit',' transmit',' transmit')}}Copy the code

2,Eventbus

// main.js
Vue.prototype.$bus = new Vue()
// child2
    this.$bus.$emit('bus'.'Bus pass, component 2 pass')
// child2
    this.$bus.$on('bus', (msg)=> {
      console.log('msg', msg)
    })
Copy the code

3,Vuex

Create a unique global data manager store that manages data and notifies components of state changes

Edge cases

4,$parent (communication between parent and sibling components can be via a common ancestor bridge)

// child2
    this.$parent.$emit('bus'.'Bus pass, component 2 pass')
// child2
    this.$parent.$on('bus', (msg)=> {
      console.log('msg', msg)
    })
Copy the code

5,$children (between parent and child components)

Methods of child components can be called directly, but the order of child elements cannot be guaranteed (in the case of asynchronous components)

this.$children[0].toParent()
Copy the code

$root accesses the root component

Access the root component, similar to $parentCopy the code

7,$refs

This works not only on components but also on normal tags, similar to $Children, but with more precise elements

<Child1 ref="child1" msg='prop spread value' @transmit = 'transmit'></Child1>
this.$refs.child1.toParent()
Copy the code

Provide/inject (it can span many generations, but data is not reactive, it can artificially pass in array objects that have been processed in response, etc.)

provide() {
  return { foo: 'foo'}} Inject: [' foo ']Copy the code

The characteristics of prop

9,$attrs

$attrs = “$attrs”; $attrs = “$attrs”

<! - ancestors -- -- ><parent msg = "msg from grandpa" @foo = 'onFoo'></parent><! -- Parent component --><Child2 v-bind='$attrs' v-on="$listeners"></Child2><! -- Subcomponent --><p>{{$attrs.msg}}</p>
Copy the code

10,$listeners

Child component events can be sent to ancestors through V-on = “listeners” to realize communication between parent components and transparent transmission of parent components

/ / child component
this.$emit('foo')
Copy the code