一、在我們使用vue進(jìn)行開發(fā)的過程中，可能會遇到一種情況：

當(dāng)生成vue實(shí)例后，當(dāng)再次給數(shù)據(jù)賦值時，有時候并不會自動更新到視圖上去；

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

二、Vue.set() 響應(yīng)式新增與修改數(shù)據(jù)

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

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

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

key：要更改的具體數(shù)據(jù)

value ：重新賦的值，

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

補(bǔ)充知識：vue Render scopedSlots

render 中 slot 的一般默認(rèn)使用方式如下： this.$slots.default 對用 template的<slot>的使用沒有name 。 想使用多個slot 的話。需要對slot命名唯一。

在render函數(shù)中動態(tài)使用多個slot，并且給slot傳值

一、我的業(yè)務(wù)邏輯：

使用了三個組件，

組件A調(diào)用組件B，組件B調(diào)用組件C，組件C是自己封裝的render渲染組件。

組件A希望將自己自定義的插槽插到C組件，C組件渲染出自定義的內(nèi)容，并且將C組件的值傳遞給B組件和A組件，B組件是對C組件進(jìn)行更大一層的封裝

A組件調(diào)用B組件

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

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

B組件中調(diào)用C組件的render函數(shù)

<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是動態(tài)的值，和A組件中的slot同一個值，才能接受來自A組件自定義的插槽，

field是來自于C組件中傳遞的值

C組件是render函數(shù)

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數(shù)據(jù)不實(shí)時更新的問題(數(shù)據(jù)更改了,但數(shù)據(jù)不實(shí)時更新)就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持好吧啦網(wǎng)。