Learn to Use Vue 3 Watch Props with Vue.js Watch Props Examples

Introduction

Vue.js is a popular JavaScript framework used for building user interfaces. With the release of Vue 3, developers now have access to new features and improvements, including enhanced prop handling with the introduction of Vue 3 Watch Props.

What are Vue 3 Watch Props?

In Vue.js, vue watch props are used to pass data from a parent component to a child component. Vue 3 Watch Props provide a way to watch for changes in props and perform actions accordingly. This feature is particularly useful when you need to react to changes in props and update the component’s internal state or trigger side effects. Don’t be confused about Vue 3 watch and watchEffect because it’s totally different from each one.

How to Use Vue 3 Watch Props

To use Vue 3 Watch Props, you need to define the props in your component and then use the watch function to watch for changes in those props. Let’s take a look at an example:


// Parent component
<template>
  <div>
    <ChildComponent :message="message" />
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      message: 'Hello, Vue 3 Watch Props!'
    };
  }
};
</script>

// Child component
<template>
  <div>
    <p>{{ message }}
  </div>
</template>

<script>
export default {
  props: {
    message: {
      type: String,
      required: true
    }
  },
  watch: {
    message(newValue) {
      console.log('Prop "message" has changed:', newValue);
    }
  }
};
</script>

In this example, the parent component passes the prop message to the child component. The child component defines the prop and uses the watch function to watch for changes in the message prop. Whenever the value of the prop changes, the watch function is triggered, and the new value is logged to the console.

Vue 3 Watch Props Examples

Let’s explore some more examples of using Vue 3 Watch Props:

Example 1: Updating Internal State

In this example, we have a parent component that passes a prop count to the child component. The child component uses the watch function to watch for changes in the count prop and updates its internal state accordingly:


// Parent component
<template>
  <div>
    <ChildComponent :count="count" />
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      count: 0
    };
  }
};
</script>

// Child component
<template>
  <div>
    <p>Count: {{ internalCount }}
  </div>
</template>

<script>
export default {
  props: {
    count: {
      type: Number,
      required: true
    }
  },
  data() {
    return {
      internalCount: 0
    };
  },
  watch: {
    count(newValue) {
      this.internalCount = newValue;
    }
  }
};
</script>

In this example, whenever the count prop in the child component changes, the watch function updates the internal state internalCount to match the new value of the prop. This allows the child component to keep track of the prop value and update its display accordingly.

Example 2: Triggering Side Effects

In this example, we have a parent component that passes a prop showModal to the child component. The child component uses the watch function to watch for changes in the showModal prop and triggers a side effect by showing or hiding a modal dialog:


// Parent component
<template>
  <div>
    <ChildComponent :showModal="showModal" />
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      showModal: false
    };
  }
};
</script>

// Child component
<template>
  <div>
    <button @click="toggleModal">Toggle Modal
    <div v-if="showModal">
      <p>Modal content goes here...
    </div>
  </div>
</template>

<script>
export default {
  props: {
    showModal: {
      type: Boolean,
      required: true
    }
  },
  watch: {
    showModal(newValue) {
      if (newValue) {
        // Show modal dialog
      } else {
        // Hide modal dialog
      }
    }
  },
  methods: {
    toggleModal() {
      this.showModal = !this.showModal;
    }
  }
};
</script>

In this example, the child component watches for changes in the showModal prop. When the prop value changes to true, the watch function shows the modal dialog. When the prop value changes to false, the watch function hides the modal dialog. The toggleModal method in the child component is used to toggle the value of the showModal prop.

Conclusion

Vue 3 Watch Props provide a powerful way to watch for changes in props and perform actions accordingly. By using the watch function, you can easily react to prop changes and update your component’s internal state or trigger side effects. This feature enhances the flexibility and reactivity of Vue.js components, making it easier to build dynamic and interactive user interfaces.

Similar Posts