{

How to listen to props changes in Vuejs| watch function example


This post is an example of how to listen to prop changes of a component in Vuejs.

Vuejs Listen and watch prop changes

Props in vuejs are used to pass values from parent to child component, also called one-way binding by default.

Sometimes we want to watch props changes to know what was changed and its previous value.

Props in parents components contain initialed with an initial value, Child components use its value as a local value and do the necessary changes.

In vuejs, watch functions provide to watch changes.

Syntax of watch function:

export default {
  name: "ChildComponent",
  props: ["name"],
  watch: {
    name: function (newValue, oldValue) {
      console.log("newValue: %s, previousValue: %s", newValue, oldValue);
    },
  },
};

Let’s declare ChildComponent.vue

In ChildComponent.vue, the parent component receives Property and displays it on the browser.

There is a watch function to listen to changes that emit old values and new values.

<template>
  <div>
    <h1>hello, {{ name }}</h1>
  </div>
</template>

<script>
export default {
  name: "MyComponent",
  props: {
    name: String,
  },
  watch: {
    name: function (newValue, oldValue) {
      console.log("newValue: %s, previousValue: %s", newValue, oldValue);
    },
  },
};
</script>

ParentComponent.Vue Here, Properties are passed to the child component using props syntax.

<template>
  <div id="app">
    <ChildComponent :name="asdasdfad" />
    <button @click="name = 'Hello Frank'">Click me</button>
  </div>
</template>

<script>
import { ChildComponent } from "./components/ChildComponent.vue";

export default {
  name: "ParentComponent",
  components: {
    ChildComponent,
  },
  data() {
    return {
      name: "Hello John",
    };
  },
};
</script>

Conclusion

To Sum up, Learn how to listen and watch property changes in the VueJS application.

THE BEST NEWSLETTER ANYWHERE
Join 6,000 subscribers and get a daily digest of full stack tutorials delivered to your inbox directly.No spam ever. Unsubscribe any time.

Similar Posts
Subscribe
You'll get a notification every time a post gets published here.