Vue parent-child component communication and event triggering (Most practical summary)

I have written an article about the father-child component value transmission communication and event triggering based on wechat applet. Today, I sort out a piece of content about the father-child component of Vue.

A, components,

Child components

<template>
  <div style="border:1px solid black; width:400px; height: 130px;">
    <h3>I'm a child component</h3>
    <button>The child component passes the value to the parent</button>
    <div>The child component receives the value of the parent:</div>
  </div>
</template> 
Copy the code

The parent component

<template>
 <div style="border:1px solid red; padding:2rem; width:400px; margin:0 auto;">
    <h3>I'm the parent component</h3>
    <div>Values passed from child to parent:</div>
    <Child></Child>
  </div>
</template>

<script>
import Child from './Child';
export default {
    components: {
        Child
    }
}
</script>
Copy the code

Effect display:This figure shows the structure of parent and child components. Let’s practice the communication between parent and child components.

2. Parent-child component communication

Parent component communicates with child component

The child component uses props to accept values passed by the parent component.

In the parent component, define a data variable and dynamically bind the value in the child component tag.

// Father.vue
<template>
 <div style="border:1px solid red; padding:2rem; width:400px; margin:0 auto;">
    <h3>I'm the parent component</h3>
    <div>The value passed by the child to the parent :{{ChildMsg}}</div>
    <Child :FatherMsg="data"></Child>
  </div>
</template>

<script>
import Child from './Child';
export default {
    data() {
        return {
            data: 'I am your father',}},components: {
        Child
    }
}
</script>
Copy the code

This is then received by the props in the child component, so that the component receives the value passed by the parent component.

// Child.vue
<template>
  <div style="border:1px solid black; width:400px; height: 130px;">
    <h3>I'm a child component</h3>
    <button>The child component passes the value to the parent</button>
    <div>Values passed from parent to child :{{FatherMsg}}</div>
  </div>
</template> 

<script>
export default {
    data() {
        return {
            data: 'I am your children',}},props: ['FatherMsg']}</script>
Copy the code

As you can see, we have the parent component talking to the child component, and then the child component talking to the parent component, and that’s what we’re going to usethis.$emitMethods.

The child component communicates with the parent component

This.$emit emits a custom event in the child component, and then listens for the event in the parent component.

Add a click event to the button button in the child component to customize the event via this.$emit and pass in a parameter:

<template>
  <div style="border:1px solid black; width:400px; height: 130px;">
    <h3>I'm a child component</h3>
    <button @click="send">The child component passes the value to the parent</button>
    <div>Values passed from parent to child :{{FatherMsg}}</div>
  </div>
</template> 

<script>
export default {
    data() {
        return {
            data: 'I am your children',}},props: ['FatherMsg'].methods: {
      send() {
        this.$emit('ListenChild'.this.data); }}}</script>
Copy the code

In the child tag of the parent component, define a variable in data to receive this value, then listen for custom events in the child component, and accept this parameter assigned to the defined variable:

<template>
 <div style="border:1px solid red; padding:2rem; width:400px; margin:0 auto;">
    <h3>I'm the parent component</h3>
    <div>The value passed by the child to the parent :{{ChildMsg}}</div>
    <Child :FatherMsg="data" @ListenChild="ListenChild"></Child>
  </div>
</template>

<script>
import Child from './Child';
export default {
    data() {
        return {
            data: 'I am your father'.ChildMsg: ' ',}},components: {
        Child
    },
    methods: {
        ListenChild(data) {
            console.log("Value passed by child component:" , data);
            this.ChildMsg = data; }}}</script>
Copy the code

Click “Child component passes value to parent” in the child component to see the following effect:

Parent and child component events are triggered

The parent component calls the event method in the child component

Call the child component’s methods directly from ref:

// Child.vue 
<template>
  <div style="border: 1px solid black; width: 150px; margin: 10px auto">I'm a child component<div style="color: red"> {{ msg }} </div>
  </div>
</template>
<script>
export default {
    data() {
        return {
            msg: ' ',}},methods: {
    childFun() {
      console.log('I am a child component of the method childFun');
      this.msg = 'My method is called.',}}};</script>
Copy the code

Add the ref attribute to the subcomponent tag and call the method in that subcomponent by finding the binding ref attribute in the method this.$refs.

// Father.vue
<template>
  <div style="border: 1px solid red; width: 200px; padding: 10px; margin: 0 auto">I'm the parent component<Button @click="handleClick">Click to invoke the child component method</Button>
    <Child ref="child" />
  </div>
</template>    

<script>
import Child from './Child';

export default {
    components: {
        Child
    },
    methods: {
        handleClick() {
            this.$refs.child.childFun(); }},}</script>
Copy the code

Via the component’s $emit, $ON method:

// Child.vue 
<template>
  <div style="border: 1px solid black; width: 150px; margin: 10px auto">I'm a child component<div style="color: red"> {{ msg }} </div>
  </div>
</template>
<script>
export default {
    data() {
        return {
            msg: ' ',}},mounted() {
    this.$on('childFun'.function() {
        console.log('I'm a child component method');
        this.msg = 'My method is called.'}); }};</script>
Copy the code

Use $on to bind a method in the child component and then use $emit to find the name of the event above the $ON binding in the parent component.

// Father.vue
<template>
  <div style="border: 1px solid red; width: 200px; padding: 10px; margin: 0 auto">I'm the parent component<Button @click="handleClick">Click to invoke the child component method</Button>
    <Child ref="child" />
  </div>
</template>    

<script>
import Child from './Child';

export default {
    components: {
        Child
    },
    methods: {
        handleClick() {
        	// The name in the child component $on
            this.$refs.child.$emit("childFun")}}},</script>
Copy the code

Both implementations have the same effect.

Before calling a method:After calling the method:

The child component calls the event method in the parent component

Call the parent component’s methods directly in the child with this.$parent

// Father.vue
<template>
  <div style="border: 1px solid red; width: 200px; padding: 10px; margin: 0 auto" >I'm the parent component<Child></Child>
    <div style="color: red"> {{ msg }} </div>
  </div>
</template>
<script>
  import Child from './Child';
  export default {
      data() {
          return {
              msg: ' '}},components: {
      Child
    },
    methods: {
      fatherMethod() {
        console.log('Methods in my parent component');
        this.msg = 'My method quilt component called'; }}};</script>
Copy the code

// Child.vue
<template>
  <div style="border: 1px solid black; width: 150px; margin: 10px auto">I'm a child component<button @click="childMethod">Click to invoke the parent component method</button>
  </div>
</template>
<script>
  export default {
    methods: {
      childMethod() {
        this.$parent.fatherMethod(); }}};</script>
Copy the code

Emit an event from the child component using $emit to the parent component. The parent component listens for this event (recommended)

// Father.vue
<template>
  <div style="border: 1px solid red; width: 200px; padding: 10px; margin: 0 auto" >I'm the parent component<Child @fatherMethod="fatherMethod"></Child>
    <div style="color: red"> {{ msg }} </div>
  </div>
</template>
<script>
  import Child from './Child';
  export default {
      data() {
          return {
              msg: ' '}},components: {
      Child
    },
    methods: {
      fatherMethod() {
        console.log('Methods in my parent component');
        this.msg = 'My method quilt component called'; }}};</script>
Copy the code

Child components can use $emit to trigger custom events for parent components.

// Child.vue
<template>
  <div style="border: 1px solid black; width: 150px; margin: 10px auto">I'm a child component<button @click="childMethod">Click to invoke the parent component method</button>
  </div>
</template>
<script>
  export default {
    methods: {
      childMethod() {
        // fatherMethod Method of the parent component
        this.$emit('fatherMethod'); }}};</script>
Copy the code

The parent passes the method to the child and calls the method directly from the child:

// Father.vue
<template>
  <div style="border: 1px solid red; width: 200px; padding: 10px; margin: 0 auto" >I'm the parent component<Child :fatherMethod="fatherMethod"></Child>
    <div style="color: red"> {{ msg }} </div>
  </div>
</template>
<script>
  import Child from './Child';
  export default {
      data() {
          return {
              msg: ' '}},components: {
      Child
    },
    methods: {
      fatherMethod() {
        console.log('Methods in my parent component');
        this.msg = 'My method quilt component called'; }}};</script>
Copy the code

A parent component can bind events to a child component tag, and the child component uses props to receive events from the parent.

// Child.vue
<template>
  <div style="border: 1px solid black; width: 150px; margin: 10px auto">I'm a child component<button @click="childMethod">Click to invoke the parent component method</button>
  </div>
</template>
<script>
  export default {
    props: {
      fatherMethod: {
        type: Function.default: null}},methods: {
      childMethod() {
        if (this.fatherMethod) {
          this.fatherMethod(); }}}};</script>
Copy the code

The above three implementation methods have the same effect.

Before calling a method:After calling the method:

Four,

At this point, most of the operations between Vue and parent components are involved, and we can do this part of the program in the development process.

I also wrote an article about the father-son component value transmission communication and event trigger of wechat applet before, interested partners can go to check.

Hope the above content can help you. If you have any questions, please leave comments.

Come on, everybody!