本篇內(nèi)容主要講解“vue增加數(shù)據(jù)不更新如何解決”，感興趣的朋友不妨來(lái)看看。本文介紹的方法操作簡(jiǎn)單快捷，實(shí)用性強(qiáng)。下面就讓小編來(lái)帶大家學(xué)習(xí)“vue增加數(shù)據(jù)不更新如何解決”吧!

成都創(chuàng)新互聯(lián)公司專(zhuān)注于蘇尼特左企業(yè)網(wǎng)站建設(shè),響應(yīng)式網(wǎng)站設(shè)計(jì),商城建設(shè)。蘇尼特左網(wǎng)站建設(shè)公司,為蘇尼特左等地區(qū)提供建站服務(wù)。全流程按需網(wǎng)站策劃，專(zhuān)業(yè)設(shè)計(jì)，全程項(xiàng)目跟蹤，成都創(chuàng)新互聯(lián)公司專(zhuān)業(yè)和態(tài)度為您提供的服務(wù)

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

解決vue數(shù)據(jù)不實(shí)時(shí)更新的問(wèn)題(數(shù)據(jù)更改了,但數(shù)據(jù)不實(shí)時(shí)更新)

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

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

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

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

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

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

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

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

value ：重新賦的值，

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

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

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

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

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

使用了三個(gè)組件，

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

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

A組件調(diào)用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組件中傳出來(lái)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是動(dòng)態(tài)的值，和A組件中的slot同一個(gè)值，才能接受來(lái)自A組件自定義的插槽，

field是來(lái)自于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: ''} 的對(duì)象。

到此，相信大家對(duì)“vue增加數(shù)據(jù)不更新如何解決”有了更深的了解，不妨來(lái)實(shí)際操作一番吧！這里是創(chuàng)新互聯(lián)網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！

文章名稱：vue增加數(shù)據(jù)不更新如何解決
網(wǎng)頁(yè)路徑：http://www.rwnh.cn/article38/ihgpsp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供外貿(mào)網(wǎng)站建設(shè)、域名注冊(cè)、移動(dòng)網(wǎng)站建設(shè)、小程序開(kāi)發(fā)、電子商務(wù)、網(wǎng)站制作

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)