vue中的父子传值双向绑定及数据修改视图不更新问题

宋华发布于2019-08-23 18:05 / 2843人阅读

摘要：在进行父子组件传值时，用到子组件直接控制父组件中的变量值以及在中直接更改对象或者数组的值，视图未发生变化的解决办法，当时完成项目时，一直未找到原因，修改了好久。

在进行父子组件传值时，用到子组件直接控制父组件中的变量值以及在vue中直接更改对象或者数组的值，视图未发生变化的解决办法，当时完成项目时，一直未找到原因，修改了好久。

1.父子组件传值双向绑定

在传递给子组件中的变量上使用.sync修饰符，就能够实现父子传值的双向绑定

2.修改对象或数组中的键，视图未发生变化

使用$set方法进行修改，官方文档中也有说明

当时我是直接对数组中的值进行修改，但是视图没有发生变化

也可以直接进行修改后对页面进行强制刷新，使用$forceUpdate()方法

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

正在努力学习中，若对你的学习有帮助，留下你的印记呗（点个赞咯^_^）

往期好文推荐：

使用vue开发移动端管理后台

实现单行及多行文字超出后加省略号

node之本地服务器图片上传

纯css实现瀑布流（multi-column多列及flex布局）

GPU云服务器云服务器 vue父子组件通讯数据库中的视图双向数据绑定 js双向数据绑定

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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