What is the difference between prop and Emit in Vue.js?

Question

I know that prop is from parent component to son and Emit is from son to father. But I would like an example of the use of both so I can better understand the concept!

Answer 1

The very one v-model is a good example for your question.

The v-model is a "syntactic sugar" that uses a prop call by default of value to pass information to the child component, and an event called by default input to inform that there have been changes in the value

Vue.component('currency-input', {
  template: '\
    <span>\
      $\
      <input\
        ref="input"\
        v-bind:value="value"\
        v-on:input="updateValue($event.target.value)">\
    </span>\
  ',
  props: ['value'], // prop value
  methods: {
    updateValue: function (value) {
      //...
      // Emite o valor do número através do evento de input
      this.$emit('input', value)
    }
  }
})

The above code defines a component that will receive a prop calling for value and whenever there is a modification, an event called input will be raised to the parent component, informing him that a modification has been made to the prop value.

The parent component in turn can use this event to update the value of value, as in the following example:

<currency-input
  :value="something"
  @input="value => { something = value }">
</currency-input>

Answer 2

A property is a custom attribute for passing information from the parent. A child should explicitly state what it expects to receive using the props option:

- Create the template with a h3 and passes the props title.

Vue.component('blog-post', {
   props: ['title'],
   template: '<h3>{{ title }}</h3>'
})

- In the parent template

new Vue({
   el: "#app",
   data() {
      return {
         message: 'hello mr. magoo'
      }
   }
});

- Will result in HTML:

<blog-post :title="message"></blog-post>
<!-- message está sendo renderizado no Html através do props title -->

---

A parent component can hear events emitted from the child component using the v-on directly in the template where the child component is used:

- Create the template with a button already with the method of incrementing coupled with the v-on:click

Vue.component('button-counter', {
   template: '<button v-on:click="incrementCounter">{{ counter }}</button>',
   data: function () {
      return {
         counter: 0
      }
   },
   methods: {
      incrementCounter: function () {
         this.counter += 1
         this.$emit('increment')
      }
   },
})

- In the parent template

new Vue({
   el: '#counter-event-example',
   data: {
      total: 0
   },
   methods: {
      incrementTotal: function () {
         this.total += 1
      }
   }
})

- Will result in HTML:

<div id="counter-event-example">
   <p>{{ total }}</p>
   <button-counter v-on:increment="incrementTotal"></button-counter>
   <button-counter v-on:increment="incrementTotal"></button-counter>
</div>

Note that now the parent template is updated in the variable total through the button and method on the child component being transmitted by the this.$emit('increment').

Sources: Vue.org - css.Tricks - Vue.jsBrasil-facebook.

This third link is from a group on Facebook, I highly recommend you participate, the guys know a lot and always help, there is a post that goes unanswered there, here on Stackoverflow is still small support the VUE.