Vue component communication: using $watch for data monitoring

Vue component communication: using $watch for data monitoring

In Vue development, component communication is a common requirement. Vue provides a variety of ways to implement communication between components. One of the common ways is to use $watch for data monitoring. This article will introduce the usage of $watch and give corresponding code examples.

The instance object of Vue provides the $watch method for monitoring data changes. $watch accepts two parameters: the property name of the data to be monitored, and the callback function. When the monitored data changes, the callback function will be triggered. Inside the callback function, you can perform some logical operations in response to data changes.

The following is an example that demonstrates how to use $watch for data monitoring:

// 父组件
<template>
  <div>
    <h1>父组件</h1>
    <p>子组件传递的消息：{{ message }}</p>
    <ChildComponent :message="message" />
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      message: ''
    };
  },
  watch: {
    message(newVal) {
      console.log('message属性发生变化:', newVal);
    }
  }
};
</script>

// 子组件
<template>
  <div>
    <h2>子组件</h2>
    <input type="text" v-model="childMessage" />
  </div>
</template>

<script>
export default {
  props: ['message'],
  data() {
    return {
      childMessage: ''
    };
  },
  watch: {
    childMessage(newVal) {
      this.$emit('update:message', newVal);
    }
  }
};
</script>

In the code example, the parent component first defines a message attribute and passes it to the child component. The parent component uses the $watch method to monitor changes in the message attribute and prints out the new attribute value in the callback function.

The child component receives the message attribute passed by the parent component and binds it to an input element. When the value of the input changes, the child component uses the $emit method to trigger a custom event named update:message, passing the new attribute value as a parameter to the parent component.

With this setting, the parent component can listen to the messages passed by the child component and respond accordingly.

$watch method also has some optional parameters, such as deep and immediate. The deep parameter is used to deeply monitor changes in nested objects, and the immediate parameter is used to execute the callback function immediately when monitoring starts. Flexible settings can be made according to specific needs.

In summary, using $watch for data monitoring is an effective way for Vue components to communicate. By monitoring changes in data, data transfer and response between components can be achieved. In actual development, using $watch reasonably as needed can make the code clearer and maintainable.

I hope this article will be helpful to you in learning Vue component communication, and I wish you can write better Vue applications!

The above is the detailed content of Vue component communication: using $watch for data monitoring. For more information, please follow other related articles on the PHP Chinese website!