Conclusion:

1. The child component $emit throws the parent component response

< father@fn =fn :data= data > </father>fn(data) {
       this.data = data} Child components trigger custom events: poper: {value: number}this.emit('fn', data)Copy the code

2. Parent component V-model response child component throws input event receive value parameter Can be configured through the model parameter response event and receive parameter

   1.<father v-model = value > </father> poper: {value: number}this.emit('input', data)Copy the code

The parent component xx.sync=”xx” is also emitted by the bidirectional binding child component $emit(‘update:xx’)

   1. <father :updata:value = value= > this.data = value :data= data > </father> Poper: {data: number}this.emit('updata:value', data)2.<father :value.sync = data :data= data > </father> Sync Settings data poper: {data: number}this.emit('updata:value', data)Copy the code

4. You can use extension functions to bind broadcast/dispatch to the prototype. This was in 1.0, but was removed in 2.0, by emitting events through the ChildrenChildren childrenparent loop

$parent: parent component content $children[0] : first child component contentthis.$parent.$emit('Custom event', data)this.$children.$emit('Custom event', data)Copy the code

5. Create a new instance to implement eventBus. The principle of the eventBus is to send and respond via onON onemit on the new instance

Instantiate component: vue.prototypr.$enentBus =newVue() instantiates component binding events:this.$eventBus.$on('Bound events', () => {}) triggers the instantiated component event:this.$eventBus.$emit('Bound events', data) Note:1.Event firing cannot precede event binding2.This can be done with $nextTickthis.$nextTick(() = > {
            this.$eventBus.$emit('Bound events', data)})Copy the code

6. Parameters can be transmitted using V-bind /attrs functions can be transmitted using V-on /attrs functions can be transmitted using V −on/listeners

$listeners> <father v-bind =$listeners>Copy the code

7. Provide inject functions and parameters

Parent component injectionprovide() {
     return{grandpa:this}} subcomponent consumptioninject: ['geandpa'
    ]
Copy the code

Ref cannot be used on template. Compute cannot be used on template

Ref DOM element DOM object REF component Component instanceCopy the code

Not recommended by the parent/parent/parent/children and distributed component/radio, dispatch1.0 can, 2.0 was done not have, because this structure is not clear