vue子组件监听props变化

当Vue子组件需要监听父组件传递的props的变化时，可以使用`watch`来监听props的变化。在子组件中，可以通过`props`选项来声明props，然后在`watch`选项中监听props的变化。

以下是一个示例：

// 父组件
<template>
  <div>
    <child-component :prop1="parentProp"></child-component>
    <button @click="changeProp">Change Prop</button>
  </div>
</template>

<script>
  import ChildComponent from './ChildComponent.vue';
  
  export default {
    components: {
      ChildComponent
    },
    data() {
      return {
        parentProp: 'Initial Prop Value'
      }
    },
    methods: {
      changeProp() {
        this.parentProp = 'New Prop Value';
      }
    }
  }
</script>

// 子组件
<template>
  <div>{{ prop1 }}</div>
</template>

<script>
  export default {
    props: {
      prop1: String
    },
    watch: {
      prop1(newValue, oldValue) {
        console.log(`Prop1 changed from ${oldValue} to ${newValue}`);
      }
    }
  }
</script>

在这个示例中，父组件传递一个字符串类型的prop到子组件中，并且在父组件中提供了一个按钮来改变prop的值。子组件中声明了一个名为`prop1`的prop，并在`watch`选项中监听它的变化。当父组件改变`prop1`的值时，子组件的`watch`函数会被调用，打印出prop的旧值和新值。

需要注意的是，当在子组件中直接修改prop的值时，Vue会发出一个警告。因此，最好遵循单向数据流的原则，只在父组件中修改prop的值。