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

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

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

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

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

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

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

key：要更改的具體資料

value ：重新賦的值，

呼叫：this.$set(target,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資料不實時更新的問題(資料更改了,但資料不實時更新)就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支援我們。