vue2监听props数据变化

// 在 Vue 2 中监听 props 数据变化可以使用 watch 选项。以下是一个简单的示例：

<template>
  <div>
    <!-- 这里展示从父组件传递过来的 message -->
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  props: {
    // 定义一个名为 message 的 prop
    message: {
      type: String,
      required: true
    }
  },
  watch: {
    // 监听 message 的变化
    message(newVal, oldVal) {
      console.log('message changed from', oldVal, 'to', newVal);
      // 在这里可以执行一些操作，比如更新本地状态或触发其他逻辑
    }
  }
};
</script>

<style scoped>
/* 样式可以根据需要添加 */
</style>

解释说明：

1. props: 定义了一个名为 message 的 prop，类型为字符串，并且是必须的。
2. watch: 使用 watch 选项来监听 message 的变化。每当 message 发生变化时，会触发相应的回调函数。
3. 回调函数: 回调函数接收两个参数，newVal 和 oldVal，分别表示新的值和旧的值。可以在回调函数中执行一些操作，比如更新本地状态或触发其他逻辑。

如果你在父组件中动态修改了 message 的值，子组件中的 watch 就会捕获到这个变化并执行相应的逻辑。