vue父组件传递给子组件的值动态改变时子组件重新渲染

在Vue中，当父组件传递给子组件的值动态改变时，可以通过以下两种方式重新渲染子组件。

第一种方式是在父组件中使用ref来声明子组件，并通过this.$refs来调用子组件中的方法来重新渲染。具体步骤如下：
1. 在父组件中使用ref属性声明子组件，例如ref="com"。
2. 在值改变的地方，通过this.$refs.com.method()来调用子组件中的方法，重新渲染子组件。
3. 为了确保DOM更新后再重新渲染子组件，需要在调用子组件方法的地方使用Vue.nextTick()方法。例如Vue.nextTick(() => { this.$refs.com.method() })。\[1\]

第二种方式是在子组件中使用watch来监听父组件传递过来的对象，并在监听回调函数中重新赋值。具体步骤如下：
1. 在子组件中添加watch来监听父组件传递过来的对象。例如watch(props.value, (newVal, oldValue) => { //重新赋值 })。
2. 在监听回调函数中重新赋值，更新子组件的数据。\[2\]

需要注意的是，在第二种方式中，为了确保DOM更新后再重新渲染子组件，可以使用Vue.nextTick()方法。例如在监听回调函数中使用Vue.nextTick(() => { //重新赋值 })。\[3\]
#### 引用[.reference_title]
- *1* *3* [vue中父组件传值给子组件，父组件值改变，子组件重新渲染](https://blog.csdn.net/hukay22/article/details/123913499)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item]
- *2* [vue3父组件传值给子组件,子组件无法实时更新父组件传递值](https://blog.csdn.net/qq_44472790/article/details/121457306)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item]
[ .reference_list ]