如何强制VueJS自定义组件重新渲染本身及其所有子组件(How to force VueJS cus

2019-09-25 17:35发布

我有,我有一个自定义Vue公司的组件,填充它的子组件动态使用JSON的使用情况。 当这个顶级VUE组件创建它加载使用JSON所有的子组件。 我有一个规定,我可以在窗体上添加额外的控制,当我更新从它本身呈现的JSON。

所以,当我更新使用AJAX后端的JSON,我想重新渲染一旦成功后的一切。

我也遇到了一些文章,说的是在自定义Vue公司部分再生的形式应采用V型秀和处理/或V-if指令。 这将不适合我的使用情况。

我看着forceUpdate API,它适用于只有电流分量。 它不影响孩子的部件。

所以看起来每个组件上的处理forceUpdate是在我的使用情况下唯一的出路?

根据图上可以看到,在MainFrom成分是顶级组件。 以下是对MainForm的模板:

<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>

下面是部分高层次概述

<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>

Answer 1:

forceUpdate()不会重新呈现儿童组件UI,但跟踪性能会。

你的情况。 您需要首先将数据组件绑定。 一旦Ajax响应回来,你只需要调用Vue.set更新绑定的数据,它会自动更新子组件



文章来源: How to force VueJS custom component to re-render itself and all its child component