What is the difference between prop and emit in vue.js?

  

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

- Create the template with a h3 and pass 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 issued from the child component using v-on directly in the template where the child component is used:

- Create the template with a button already with the method of incrementing with 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 the parent template is now updated in the variable total through the button and method in the child component being transmitted by this.$emit('increment') .

Sources: vue.org - # vuejsbr /? fref = nf "> vue.jsBrasil-facebook .

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

v-model is a good example for the your question.

The v-model is a "syntactic sugar" that uses a prop called by default of value to pass information to the child component, and an event called by default of input to report changes in 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 called value and whenever there is a modification, an event called input will be raised to the parent component, informing it that a modification was 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>