vue增加數據不更新如何解決

本篇內容主要講解“vue增加數據不更新如何解決”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“vue增加數據不更新如何解決”吧!

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

解決vue數據不實時更新的問題(數據更改了,但數據不實時更新)

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

當生成vue實例后，當再次給數據賦值時，有時候并不會自動更新到視圖上去；

向響應式對象中添加一個屬性，并確保這個新屬性同樣是響應式的，且觸發視圖更新。它必須用于向響應式對象上添加新屬性，因為 Vue 無法探測普通的新增屬性 ，需要用vue內置的方法

二、Vue.set() 響應式新增與修改數據

此時我們需要知道Vue.set()需要哪些參數

調用方法：Vue.set( target, key, value ) 或者 this.$set(target, key, value);

target：要更改的數據源(可以是對象或者數組)

key：要更改的具體數據

value ：重新賦的值，

調用：this.$set(target, key, value);

補充知識：vue Render scopedSlots

render 中 slot 的一般默認使用方式如下： this.$slots.default 對用 template的<slot>的使用沒有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: 'name'
     },
     this.$scopedSlots.name({
      field: field,
      rowData: rowData,
     })
    );

C組件往上傳遞的值就是 {field：'', rowData: ''} 的對象。

到此，相信大家對“vue增加數據不更新如何解決”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！