vue2子组件监听props数据变化代码

在 Vue2 中，子组件监听父组件传递的 Prop 数据变化，可以通过 `watch` 来实现。具体的代码如下：

Vue.component('child-component', {
  props: {
    message: {
      type: String,
      default: ''
    }
  },
  watch: {
    message: function(newVal, oldVal) {
      console.log('Prop message changed: ', newVal, oldVal)
    }
  }
})

在子组件中定义 `watch` 属性，监听父组件传递的 `message` Prop 数据变化。当 `message` 数据变化时，`watch` 函数会被触发，可以在函数中获取新旧值并进行相应的处理。

需要注意的是，如果需要监听对象或数组的变化，需要使用深度监听，即在 `watch` 中使用 `{ deep: true }` 选项。

Vue.component('child-component', {
  props: {
    items: {
      type: Array,
      default: () => []
    }
  },
  watch: {
    items: {
      handler: function(newVal, oldVal) {
        console.log('Prop items changed: ', newVal, oldVal)
      },
      deep: true
    }
  }
})

在上面的代码中，我们监听了父组件传递的 `items` Prop 数组变化，并使用了深度监听。当数组中的元素发生变化时，`watch` 函数会被触发，并打印出新旧值。