vue父组件传递给子组件的值改变时子组件展示变化

在Vue中，当父组件传递给子组件的值改变时，子组件展示的变化可以通过以下几种方式实现。

第一种方式是在子组件中定义一个watch属性，用来监听父组件通过prop传递的数据的变化情况。当父组件的值改变时，watch属性会自动触发相应的回调函数，你可以在回调函数中更新子组件的展示。\[2\]

第二种方式是在父组件中使用ref来声明子组件，并通过this.$refs来访问子组件的方法。当父组件的值改变时，可以调用子组件中的方法来重新渲染子组件。需要注意的是，在调用子组件方法之前，最好使用Vue.nextTick()来确保DOM已经更新完毕。\[3\]

另外，如果父组件传递给子组件的值是通过axios异步请求获取的，可能会出现子组件获取数据为空的问题。解决这个问题的思路有两种：一种是等父组件确认从后端获取到数据之后再传递给子组件；另一种是在子组件中监听父组件传递数据的变化情况，当数据到达后再进行展示。\[2\]

综上所述，你可以根据具体情况选择合适的方式来实现父组件传递给子组件的值改变时子组件展示的变化。
#### 引用[.reference_title]
- *1* *2* [Vue 父组件通过 prop 传值给子组件 但子组件获取的值为空-解决记录](https://blog.csdn.net/qq_41773806/article/details/121735767)[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]
- *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]
[ .reference_list ]