详解vue中的父子传值双向绑定及数据更新问题

前端  /  管理员 发布于 4年前   597

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

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

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

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

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

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

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

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

您可能感兴趣的文章:

• 解决vue中修改了数据但视图无法更新的情况
• 解决vue keep-alive 数据更新的问题
• 解决IE11 vue +webpack 项目中数据更新后页面没有刷新的问题
• vue 解决异步数据更新问题
• Vue 父子组件的数据传递、修改和更新方法
• vue.js通过自定义指令实现数据拉取更新的实现方法
• 谈谈对vue响应式数据更新的误解
• Vue.js 通过jQuery ajax获取数据实现更新后重新渲染页面的方法
• Vue2.X 通过AJAX动态更新数据
• Vue.js+Layer表格数据绑定与实现更新的实例
• 实现vuex与组件data之间的数据同步更新方式
• VUE 直接通过JS 修改html对象的值导致没有更新到数据中解决方法分析