vue3watch侦听父传子

在Vue3中，可以使用`watch`侦听父组件传递给子组件的属性。具体步骤如下：

1. 在子组件中，使用`props`接收父组件传递的属性。

2. 在`setup`函数中，使用`watch`侦听父组件传递的属性。

下面是一个示例代码：

<!-- 父组件 -->
<template>
  <div>
    <ChildComponent :count="count" />
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue'

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      count: 0
    }
  },
  mounted() {
    setInterval(() => {
      this.count++
    }, 1000)
  }
}
</script>

<!-- 子组件 -->
<template>
  <div>
    <p>父组件传递的count值为：{{ count }}</p>
    <p>count值变化的次数为：{{ countChangeTimes }}</p>
  </div>
</template>

<script>
import { watch, ref } from 'vue'

export default {
  props: {
    count: {
      type: Number,      default: 0
    }
  },
  setup(props) {
    const countChangeTimes = ref(0)

    watch(() => props.count, (newVal, oldVal) => {
      countChangeTimes.value++
    })

    return {
      countChangeTimes
    }
  }
}
</script>

在上面的示例代码中，父组件传递了一个名为`count`的属性给子组件。在子组件中，使用`props`接收了这个属性，并在`setup`函数中使用`watch`侦听了这个属性的变化。每当`count`的值发生变化时，`watch`函数中的回调函数就会被触发，从而更新`countChangeTimes`的值。