vue父组件更新子组件的列表

在Vue中，父组件更新子组件的列表可以通过props和watch来实现。你可以使用props将父组件的数据传递给子组件，并在子组件中使用该数据进行渲染。当父组件的数据发生变化时，可以使用watch来监听该数据，并在监听到变化时执行相应的操作。

一个常见的做法是，在父组件中通过$watch监听子组件的data数据的变化。首先在父组件的mounted生命周期钩子函数中获取子组件的data数据，然后通过$watch监听该数据的变化，并在监听到变化时执行相应的操作。

比如，你可以在父组件的mounted函数中获取子组件的data数据：

this.$nextTick(() => {
  const useData = this.$refs.sonRef.$data;
  this.$watch(() => {
    return useData;
  }, (val) => {
    console.log(val);
    // 在这里可以执行子组件数据更新后的操作
  }, { deep: true });
});

以上代码中，通过this.$refs.sonRef.$data获取了子组件的data数据，然后通过$watch监听该数据的变化，并在变化时执行相应的操作。

另外，在子组件中，你也可以使用props来接收父组件传递的数据，并在数据变化时触发更新。

例如，在子组件的props中定义一个名为data_key的属性来接收父组件传递的数据：

props: ["data_key"],

然后可以使用watch来监听data_key的变化，并在变化时执行相应的操作：

watch: {
  data_key: {
    handler(newValue, oldValue) {
      // 在这里可以执行子组件数据更新后的操作
    },
    deep: true
  }
}

以上代码中，通过watch监听data_key的变化，并在变化时执行相应的操作。

综上所述，你可以通过在父组件中使用$watch监听子组件的data数据的变化，并在变化时执行相应的操作，或者在子组件中使用props接收父组件传递的数据，并使用watch监听数据的变化来实现父组件更新子组件的列表。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *3* [Vue父组件向子组件传递子组件实时更新](https://blog.csdn.net/qq_42396791/article/details/125488377)[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^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
- *2* [vue 父组件监听子组件的数据变化 父组件监听子组件的data](https://blog.csdn.net/qq_41287158/article/details/128716687)[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^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]