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

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

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

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




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

  • 使用$set方法进行修改,官方文档中也有说明
vue中的父子传值双向绑定及数据修改视图不更新问题_第1张图片
  • 当时我是直接对数组中的值进行修改,但是视图没有发生变化
  • 也可以直接进行修改后对页面进行强制刷新,使用$forceUpdate()方法
this.options[0] = 100;
this.$forceUpdate();
正在努力学习中,若对你的学习有帮助,留下你的印记呗(点个赞咯^_^)

你可能感兴趣的:(父子组件-动态渲染,vue.js,前端,javascript)