vue3和ts子组件怎么监听父组件传递来的值

在Vue3中，如果你使用TypeScript (TS) 开发，子组件可以通过props接收来自父组件的数据。要监听父组件传来的值变化，你需要按照以下步骤操作：

1. **在子组件的props中声明**：
在子组件的`Props`部分，声明从父组件接收到的属性，比如一个名为`parentValue`的对象或字符串：

   props: {
     parentValue: {
       type: String | Object,
       default: () => {} // 或者默认值
     }
   },

2. **在模板中绑定prop**：
在子组件的模板中，通过`v-model`或者其他指令绑定这个prop，这样当父组件的值改变时，子组件会自动更新：

   <template>
     <input v-model="parentValue" />
   </template>

3. **在组件实例中监听变化**：
如果你希望在父组件的值发生变化时执行特定的操作，可以在`setup()`或`mounted()`生命周期钩子中添加事件监听器，如`watch`：

   import { watch } from "vue";

   setup() {
     const handleChange = (newValue) => {
       console.log("Parent value updated:", newValue);
       // ...在这里执行其他操作
     };

     watch(() => this.parentValue, handleChange); // 当parentValue更改时调用handleChange

     return { parentValue };
   }