vue增加資料不更新怎麼辦

vue增加資料不更新的解決方法：1、使用「this.$set(target, key, value);」或「Vue.set(target, key, value)」方式新增屬性； 2.在render函數中動態使用多個slot，並且給slot傳值即可。

本教學操作環境：Windows10系統、Vue 3版、Dell G3電腦。

vue增加資料不更新怎麼辦？

解決vue資料不即時更新的問題(資料變更了,但資料不即時更新)

一、在我們使用vue進行開發的過程中，可能會遇到一種情況：

當生成vue實例後，當再次賦值資料時，有時並不會自動更新到視圖上去；

向響應式物件中加入一個屬性，並確保這個新屬性同樣是響應式的，且觸發視圖更新。它必須用於在響應式物件上新增屬性，因為Vue 無法探測普通的新增屬性，需要用vue內建的方法

二、Vue.set() 響應式新增與修改資料

此時我們需要知道Vue.set()需要哪些參數，官方API：https://cn.vuejs.org/v2/api/#Vue-set

##呼叫方法：Vue .set( target, key, 值 ) 或this.$set(target, key, 值);

target：要更改的資料來源(可以是物件或陣列)

key：要更改的具體資料

value ：重新賦值的值，

呼叫：this.$set(target, key, value);

補充知識：vue Render scopedSlots

render 中slot 的一般預設使用方式如下： this.$slots.default 對用template的的使用沒有name 。想使用多個slot 的話。需要為slot命名唯一。

在render函數中動態使用多個slot，並且給slot傳值

一、我的業務邏輯：

#使用了三個元件，

元件A呼叫元件B，元件B呼叫元件C，元件C是自己封裝的render渲染元件。

元件A希望將自己自訂的插槽插到C元件，C元件渲染出自訂的內容，並且將C元件的值傳遞給B元件和A元件，B元件是對C元件進行更大一層的封裝

A元件呼叫B元件

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

A元件引用B元件，slot-scope接收從B元件中傳出solt的值，slot=“name”,是為插槽具名；

B元件中呼叫C元件的render函數

<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元件span中slot是動態的值，和A元件中的slot同一個值，才能接受來自A元件自訂的插槽，

field是來自於C元件中傳遞的值

C元件是render函數

h(
     "td",
     {
      style: { width: field.width + "px" },
      class: { borderRight },
      // 作用域插槽格式
      // { name: props => VNode | Array<VNode> }
      scopedSlots: this.$scopedSlots.name,
      // 如果组件是其他组件的子组件，需为插槽指定名称
      slot: &#39;name&#39;
     },
     this.$scopedSlots.name({
      field: field,
      rowData: rowData,
     })
    );

C元件往上傳遞的值是{field：'', rowData: ''} 的物件

推薦學習：《

vue.js影片教學》

以上是vue增加資料不更新怎麼辦的詳細內容。更多資訊請關注PHP中文網其他相關文章！