Vue2之父子组件传值中使用watch监听props中的对象

在Vue 2中，可以使用watch来监控props中的对象变化。以下是一个简单的例子：

<template>
  <div>
    <child :myObject="myObject"></child>
  </div>
</template>
 
<script>
import Child from './Child.vue';
 
export default {
  components: {
    Child
  },
  data() {
    return {
      myObject: {
        key: 'initial value'
      }
    };
  },
  watch: {
    'myObject': {
      handler(newVal, oldVal) {
        console.log('myObject changed:', newVal);
      },
      deep: true
    }
  }
};
</script>

在父组件中，你定义了一个myObject对象，并通过props传递给子组件Child。在父组件中，你使用watch来监控myObject对象的变化。当对象内部属性变化时，handler函数会被触发。

子组件Child.vue可能看起来像这样：

<template>
  <div>
    <button @click="updateObject">Update</button>
  </div>
</template>
 
<script>
export default {
  props: ['myObject'],
  methods: {
    updateObject() {
      // 修改传入的对象
      this.myObject.key = 'updated value';
    }
  }
};
</script>

在子组件中，你可以通过一个按钮来修改传入的myObject对象。当你点击按钮，myObject对象的key属性会被更新，并触发父组件中的watch监控。