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

宋華發布于2019-08-23 18:05 / 2937人閱讀

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

在進行父子組件傳值時，用到子組件直接控制父組件中的變量值以及在vue中直接更改對象或者數組的值，視圖未發生變化的解決辦法，當時完成項目時，一直未找到原因，修改了好久。

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

在傳遞給子組件中的變量上使用.sync修飾符，就能夠實現父子傳值的雙向綁定

2.修改對象或數組中的鍵，視圖未發生變化

使用$set方法進行修改，官方文檔中也有說明

當時我是直接對數組中的值進行修改，但是視圖沒有發生變化

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

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

正在努力學習中，若對你的學習有幫助，留下你的印記唄（點個贊咯^_^）

往期好文推薦：

使用vue開發移動端管理后臺

實現單行及多行文字超出后加省略號

node之本地服務器圖片上傳

純css實現瀑布流（multi-column多列及flex布局）

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

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/104667.html

關于前端Vue框架的知識點

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

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

摘要：雖然計算屬性在大多數情況下更合適，但有時也需要一個自定義的偵聽器，當需要在數據變化時執行異步或開銷較大的操作時，通過偵聽器最有用。路由的鉤子函數首頁可以控制導航跳轉，，等，一般用于頁面的修改。談談你對MVVM開發模式的理解 MVVM分為Model、View、ViewModel三者。Model 代表數據模型，數據和業務邏輯都在Model層中定義；View 代表UI視圖，負責數據的展示；...

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

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

darcrand 2019-08-23 14:56 評論0 收藏0
VUE知識點集錦

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

Tecode 2019-08-23 16:02 評論0 收藏0
VUE知識點集錦

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

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