Vue.js 如何强制VueJS自定义组件重新渲染自身及其所有子组件

我有一个用例，其中我有一个自定义Vue组件，它使用JSON动态填充其子组件。创建此顶级vue组件时，它将使用JSON加载所有子组件。我有一个条款，当我更新JSON时，我可以在表单上添加额外的控件

因此，当我使用AJAX在后端更新JSON时，我希望在发布成功后重新呈现所有内容

此外，我还看到一些文章说，应该使用v-show和/或v-if指令处理在自定义Vue组件上重新生成表单。 这不符合我的用例

我研究了API，它只适用于当前组件。它不影响子组件

看来在我的用例中，在每个组件上处理forceUpdate是唯一的方法

根据该图，您可以看到MainFrom组件是顶级组件。以下是主窗体的模板：

<template>
 <div>
    <div v-for="(entity, index) of mySchemaChunks >
         <FormSection :componentList="entity" />
    </div>
  </div>
</template>
<script>

export default {
   store,

   computed: {
      mySchemaChunks() {
         // returns the chunks from schema (schema is stored in Vuex) 
         // where each chunks is array (segments of schema)
         // Each chunk is a section that has its own list of 
         // controls. 
      }
   },

   methods: {
       addNewJsonSchemaNodes() {
         // This function will update master Json schema in the backend
         // using AJAX which was used to generate the JSON from which
         // we generate the MainFrom and all its children
         // When App is initialized it prepares the JSON to generate
         // MainForm and store that JSON in the Vuex module as schema 
         // and model object

         // I do an AJAX post here which only send me status 200
         // This is not enough for me to re-render and generate all
         // dynamic component

         // May be I should try to get back the JSON after successful
         // update of Master JSON in backend ... so that I can update 
         // my Vuex module schema and model object with new values ...
         // And that should do the trick and all components (parent to 
         // children will be rendered ...????

         // Edit: OK.. Now I am getting the data back from AJAX post 
         // which is now rendering the entire form
       }

   }
}
</script>

forceUpdate（）
不会重新呈现子组件UI，但跟踪的属性会

就你而言。首先需要将数据绑定到组件。一旦ajax响应返回，您只需调用
Vue.set
来更新数据绑定，它将自动更新子组件
请提供您尝试实现的简化内容。Vue是数据驱动的，这意味着如果json数据发生更改，子组件绑定json数据的某些属性，它也将被更新。你能分享你的MCV代码吗？听起来你没有正确使用Vue.js。除了特殊情况（例如，将数据存储在
集中
），Vue.js应自动更新父组件和子组件。我已通过触发所有组件（父组件除外）处理的自定义事件来修复此问题，以销毁自身。然后我将变量重置为新数据，然后重新呈现整个表单。但是我想知道我是否必须销毁所有子组件。因为我当前销毁所有子项并更改数据以重新呈现UI的方式会产生副作用，即被销毁的组件似乎仍被vue缓存，并且它们在自定义事件上起作用并损坏Vuex store中我的模型中的某些数据。设置正确的键可能会修复它？不确定。。。但肯定是奇怪的缓存（不确定这是否是缓存问题，但很可能是）或组件密钥问题。因为$destroy函数似乎没有从缓存中删除组件…是的。这就是我所做的。而且它起作用了。没有必要明确地销毁任何儿童。
<template>
<div>
   // Render the list of entity passed to it as property in v-for 
   // This will add the dynamic Vue components as its children
</div>
</template>