Vue组件通信：使用$watch进行数据监听

// 父组件
<template>
  <div>
    <h1>父组件</h1>
    <p>子组件传递的消息：{{ message }}</p><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</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>