Solve the problem that vue data is not updated in real time of data has changed but the data is not updated in real time

1. In our development process using vue, we may encounter one situation:

When the vue instance is generated, when the data is assigned again, it is sometimes not automatically updated to the view;

Add 1 property to the responsive object and make sure that the new property is also responsive and triggers a view update. It must be used to add new attributes to responsive objects, because Vue cannot detect ordinary new attributes and needs to use the built-in methods of vue

2. Vue. set () Responsive Addition and Modification of Data

At this time, we need to know what parameters are required for Vue.set (). Official API: https://cn.vuejs.org/v2/api/# Vue-set

Calling method: Vue. set (target, key, value) or this. $set (target, key, value);

target: The data source to change (can be an object or an array)

key: Specific data to change

value: The reassigned value,

Call: this. $set (target, key, value);

Supplementary knowledge: vue Render scopedSlots

The default usage of slot in render is as follows: this. $slots. default for template < slot > There is no name in the use of. If you want to use multiple slot. slot needs to be named only 1.

Use multiple slot dynamically in render function and pass value to slot

1. My business logic:

Three components are used,

Component A calls component B, component B calls component C, and component C is its own encapsulated render rendering component.

The component A wants to insert its own self-defined slot into the C component, the C component renders the self-defined content, and passes the value of the C component to the B component and the A component, and the B component encapsulates the C component in a larger layer

The A component calls the B component

<index-grid>
     <div
      slot="name"
      slot-scope="field"
      class="check-link"
      @click="rowLinkClick"
     >
      <span>{{ field.field.rowData.name }}</span>
     </div>
</index-grid>

The A component refers to the B component, and slot-scope receives the value of solt from the B component, slot= "name", which is the name of the slot;

Calling the render function of the C component in the B component

<sub-grid ref="indexGridSub">
   <span
    v-for="(item, index) in fields"
    :key="index"
    slot="name"
    slot-scope="field"
   >
    <slot name="name" :field="field"></slot>
   </span>
 
  </sub-grid>

B component span slot is a dynamic value, and slot in A component is the same value, can accept the slot from A component custom,

field is a value passed from the C component

The C component is an render function

h(
     "td",
     {
      style: { width: field.width + "px" },
      class: { borderRight },
      //  Scope slot format 
      // { name: props => VNode | Array<VNode> }
      scopedSlots: this.$scopedSlots.name,
      //  If the component is a child of another component, you need to specify a name for the slot 
      slot: 'name'
     },
     this.$scopedSlots.name({
      field: field,
      rowData: rowData,
     })
    );

The value passed up by the C component is the object of {field: '', rowData:''}