Methods for parent components to listen for child component events and send back information

This article introduces that the parent component listens to child component events and sends back information. It is shared with you. I hope this article will be helpful to you.

Use vm.$emit

1. Reference child components in parent component

<child @from-child-msg="listenChildMsg"></child >

2. Use $emit to send events in subcomponents

this.$emit('from-child-msg', 'This is the message passed by the child component');

demo

&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
  &lt;meta charset="UTF-8"&gt;
  &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
  &lt;meta http-equiv="X-UA-Compatible" content="ie=edge"&gt;
  &lt;title&gt;Document&lt;/title&gt;
  &lt;style&gt;
    * {
      padding: 0;
      margin: 0;
    }
    input, select {
      height: 30px;
    }
  &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
  &lt;div &gt;
    &lt;child value="name" @msg-from-child="getMsgFromChild"&gt;&lt;/child&gt;
  &lt;/div&gt;
  &lt;script src="/ajax/libs/vue/2.2.6/"&gt;&lt;/script&gt;
  &lt;script&gt;
    ('child', {
      data: function () {
        return {
          val: 
        }
      },
      props: ['value'],
      methods: {
        handleClick () {
          this.$emit('msg-from-child', )
        }
      },
      template: `
        &lt;div&gt;&lt;input type="text" v-model="val"&gt;&lt;button type="button" @click="handleClick"&gt;Sure&lt;/button&gt;&lt;/div&gt;
      `
    })
    new Vue ({
      el: '#app',
      data: {
        
      },
      methods: {
        getMsgFromChild (v) {
          alert('msg: ' + v)
        }
      }
    })
  &lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;

The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.