vue中的父子傳值雙向綁定及數(shù)據(jù)修改視圖不更新問題

宋華發(fā)布于2019-08-23 18:05 / 3008人閱讀

摘要：在進(jìn)行父子組件傳值時(shí)，用到子組件直接控制父組件中的變量值以及在中直接更改對象或者數(shù)組的值，視圖未發(fā)生變化的解決辦法，當(dāng)時(shí)完成項(xiàng)目時(shí)，一直未找到原因，修改了好久。

在進(jìn)行父子組件傳值時(shí)，用到子組件直接控制父組件中的變量值以及在vue中直接更改對象或者數(shù)組的值，視圖未發(fā)生變化的解決辦法，當(dāng)時(shí)完成項(xiàng)目時(shí)，一直未找到原因，修改了好久。

1.父子組件傳值雙向綁定

在傳遞給子組件中的變量上使用.sync修飾符，就能夠?qū)崿F(xiàn)父子傳值的雙向綁定

2.修改對象或數(shù)組中的鍵，視圖未發(fā)生變化

使用$set方法進(jìn)行修改，官方文檔中也有說明

當(dāng)時(shí)我是直接對數(shù)組中的值進(jìn)行修改，但是視圖沒有發(fā)生變化

也可以直接進(jìn)行修改后對頁面進(jìn)行強(qiáng)制刷新，使用$forceUpdate()方法

this.options[0] = 100;
this.$forceUpdate();

正在努力學(xué)習(xí)中，若對你的學(xué)習(xí)有幫助，留下你的印記唄（點(diǎn)個(gè)贊咯^_^）

往期好文推薦：

使用vue開發(fā)移動(dòng)端管理后臺

實(shí)現(xiàn)單行及多行文字超出后加省略號

node之本地服務(wù)器圖片上傳

純css實(shí)現(xiàn)瀑布流（multi-column多列及flex布局）

云服務(wù)器 GPU云服務(wù)器 vue父子組件通訊數(shù)據(jù)庫中的視圖雙向數(shù)據(jù)綁定 js雙向數(shù)據(jù)綁定

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/104667.html

相關(guān)文章

關(guān)于前端Vue框架的知識點(diǎn)

摘要：最近有時(shí)間，整理一下的知識點(diǎn)，很多都是面試常見的的生命周期如果你能理解了這張圖，也就對的生命周期有了一個(gè)大致的了解。創(chuàng)建前后在階段，實(shí)例的掛載元素還沒有。模式下，前端的必須和實(shí)際向后端發(fā)起請求的一致，如。最近有時(shí)間，整理一下Vue的知識點(diǎn)，很多都是面試常見的 1、Vue的生命周期如果你能理解了這張圖，也就對Vue的生命周期有了一個(gè)大致的了解。 showImg(https://s...

PAMPANG 2019-08-23 18:27 評論0 收藏0
vue面試

摘要：雖然計(jì)算屬性在大多數(shù)情況下更合適，但有時(shí)也需要一個(gè)自定義的偵聽器，當(dāng)需要在數(shù)據(jù)變化時(shí)執(zhí)行異步或開銷較大的操作時(shí)，通過偵聽器最有用。路由的鉤子函數(shù)首頁可以控制導(dǎo)航跳轉(zhuǎn)，，等，一般用于頁面的修改。談?wù)勀銓VVM開發(fā)模式的理解 MVVM分為Model、View、ViewModel三者。Model 代表數(shù)據(jù)模型，數(shù)據(jù)和業(yè)務(wù)邏輯都在Model層中定義；View 代表UI視圖，負(fù)責(zé)數(shù)據(jù)的展示；...

vspiders 2019-08-23 18:38 評論0 收藏0
Vue父子組件通信的三兩事（prop、emit）

摘要：的單向數(shù)據(jù)傳遞直接作為一個(gè)本地變量下面是我的子組件這是父組件給我傳的數(shù)據(jù)運(yùn)行結(jié)果如下圖子組件向父組件傳遞數(shù)據(jù)基本使用子組件向父組件傳遞數(shù)據(jù)，不能像上面一樣實(shí)時(shí)的傳遞數(shù)據(jù)，必須通過事件觸發(fā)。組件是Vue核心功能之一，合理的組件化，可以減少我們代碼的冗余，提高項(xiàng)目的可維護(hù)性。下面，我將由淺入深的講Vue的組件在講之前，首先我們先了解一下組件的命名。 HTML是對特征名不敏感的語言，他...

darcrand 2019-08-23 14:56 評論0 收藏0
VUE知識點(diǎn)集錦

摘要：載入前后在階段，實(shí)例的和都初始化了，但還是掛載之前為虛擬的節(jié)點(diǎn)，還未替換。類似于，不同在于提交的是，而不是直接變更狀態(tài)可以包含任意異步操作。 vue基礎(chǔ) 1、 router 路由與 a 標(biāo)簽的區(qū)別：https://www.jianshu.com/p/34b...2、 VUE雙向綁定的原理：答：VUE實(shí)現(xiàn)雙向數(shù)據(jù)綁定的原理就是利用了 Object.defineProperty() 這個(gè)...

Tecode 2019-08-23 16:02 評論0 收藏0
VUE知識點(diǎn)集錦

摘要：載入前后在階段，實(shí)例的和都初始化了，但還是掛載之前為虛擬的節(jié)點(diǎn)，還未替換。類似于，不同在于提交的是，而不是直接變更狀態(tài)可以包含任意異步操作。 vue基礎(chǔ) 1、 router 路由與 a 標(biāo)簽的區(qū)別：https://www.jianshu.com/p/34b...2、 VUE雙向綁定的原理：答：VUE實(shí)現(xiàn)雙向數(shù)據(jù)綁定的原理就是利用了 Object.defineProperty() 這個(gè)...

APICloud 2019-08-02 14:34 評論0 收藏0