In the current episode am about to give some detail about Emit, Watch, and Methods of the OptionsAPI. I wrote about data, props, and computed properties in the previous episode and this post tries to extend that list with further OptionsApi elements of the VueJS.

What is the purpose of the methods block of OptionsAPI?

• To avoid complex functionalities at the template level, we can define and call methods instead.

<div id="app">
    {{firstName}} {{lastName.toUpperCase()}}
</div>

Instead of this above, we can write this below.

<div id="app">
    {{ fullName()}}
</div>

const vm = Vue.createApp({
    data() {
        return {
            firstName: 'John',
            lastName: 'Doe'
        }
    },
    methods: {
        fullName() {
            return `${this.firstName} ${this.lastName.toUpperCase()}`
        }
    }
}).mount('#app')

When can we use the watch property?

• Developers use watchers to perform additional actions whenever a value changes. It is especially true whenever you want to perform an asynchronous task.
• Computed properties are similar to watchers because they watch our data for changes.
  • But computed properties can never be asynchronous. At least they shouldn’t be.
  • You expect a value from a computed properties function.
• With watchers, you have the freedom for asynchronous tasks.
• Although, it is not a common scenario when you need to use it.

const vm = Vue.createApp({
    data() {
        return {}
    },
    methods: {},
    computed: {},
    watch: {
        age(newVal, oldVal) {
            setTimeout(() => {
                this.age = 20;
            },3000)
        }
    }
}).mount('#app')

What about with OptionsApi Emit?

• Emit means to produce or trigger an event.
• We need to use it to change the property value on the parent scope.
• But we do not need to use it to show the value.

Only parent components can listen for events from children components:

So if we have a property on the global level that we want to update in the child component then we need to use emit in the following way:

<template>
  <h3>Heyy!</h3>
  <greeting :age="age"></greeting>
  <!-- we listen ( with v-on or @ directive ) for the age-change event an increase the value -->
  <user :age="age" @age-change="age++"></user>
  <!-- We can pass params to the event if it is a function -->
  <!-- <user :age="age" @age-change="updateAge"></user> -->
</template>
<script>
// Import components locally in VueJS
import Greeting from "@/components/Greeting.vue";
import User from "@/components/User";
// Vue common code section
export default {
  name: "App",
  components:{
    Greeting,
    User
  },
  data(){
    return{
      age: 20
    }
  },
  methods:{
    updateAge(num){
      this.age +=num
    }
  }
}

The age property with the value 20 is in the root level on the App component.

<template>
  <!-- We call onClickAge method on click -->
  <button type="button" @click="onClickAge">Increase Age</button>
  <p>The user is {{age}} years old</p>
</template>
<script>
export default {
  name: "User",
  props: [
      "age"
  ],
  // Without passing the eventHandler name to the emit property we will have error or warning: 'Extraneous non-emits event listeners (ageChange) were passed to component ... '
  emits:['age-change'], // this is a recommended good practise by vue
  methods:{
    onClickAge(){
      // We emit an event with the 'age-change' name upward the hierarch chain
      this.$emit('age-change', 3)
    }
  }
}
</script>

We increase the age property from the User component that is defined in the parent component level.

Conclusion and closing

In the previous and in this note we went through all features of the OptionsAPI. Why we need them and when we need to use them.