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


Posted in Javascript onJune 13, 2019

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

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

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

<!-- 父组件 -->
<template>
 <div class="audioCate">
 <child :show.sync="showModel" @closeModel="handleCloseModel"></child>
 </div>
</template>
<script>
 import child from './child'
 export default{
 components: {
  child,
 }
 data() {
  return {
  showModel: false
  }
 },
 methods: {
  handleCloseModel() {
  this.showModel = false;
  }
 }
 }
</script>
<!-- 子组件 -->
<template>
 <div class="cate" @click="handleClick">
 <div></div>
 </div>
</template>
<script>
 export default{
 props: {
  show: Boolean,
 },
 data() {
  return {
  showModel: false
  }
 },
 methods: {
  handleClick() {
  /* 直接更新父组件中的showModel值 */
  this.$emit('update:show', false);
  /* 或者调用父组件中的方法对showModel进行更改 */
  /* this.$emit('closeModel'); */
  }
 }
 }
</script>

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

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

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

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

<script>
 export default{
 data() {
  return {
  item: {
   title: '222'
  },
  options: [11, 22],
  list: [
   {
   title: '2222'
   }
  ]
  }
 },
 created() {
  /* 对于对象,第一个为要修改的对象,第二个参数为对象的键,第三个为要修改的键对应的值 */
  this.$set(this.item, 'title', '2200');
  /* 对于对象,第一个为要修改的数组,第二个参数为数组索引,第三个为要修改的索引对应的值 */
  this.$set(this.options, 0, 33);
  /* 对于数组里包含对象,可以利用循环对其进行修改 */
  this.list.forEach(item => {
  this.$set(item, '_disableExpand', true);
  });
  /* 对于数组里包含对象,也可以利用Object.assign对其进行修改 */
  this.list[0] = Object.assign({}, this.list[0], { num: 10 });
  this.$set(this.list, 0, this.list[0]);
 },
 }
</script>

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

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript实现禁止后退的方法
Dec 27 Javascript
IE中radio 或checkbox的checked属性初始状态下不能选中显示问题
Jul 25 Javascript
jQuery实现的Email中的收件人效果(按del键删除)
Mar 20 Javascript
JavaScript 判断日期格式是否正确的实现代码
Jul 04 Javascript
js单例模式详解实例
Nov 21 Javascript
JQuery判断checkbox是否选中及其它复选框操作方法合集
Jun 01 Javascript
JavaScript实现自动弹出窗口并自动关闭窗口的方法
Aug 06 Javascript
JS 面向对象之继承---多种组合继承详解
Jul 10 Javascript
详解webpack 多页面/入口支持&amp;公共组件单独打包
Jun 29 Javascript
微信小程序实现底部导航
Nov 05 Javascript
Vue2.0实现组件之间数据交互和通信操作示例
May 16 Javascript
vue-router的两种模式的区别
May 30 Javascript
基于Vue实现平滑过渡的拖拽排序功能
Jun 12 #Javascript
Vue + Elementui实现多标签页共存的方法
Jun 12 #Javascript
JavaScript使用面向对象实现的拖拽功能详解
Jun 12 #Javascript
JS实现点击生成UUID的方法完整实例【基于jQuery】
Jun 12 #jQuery
小程序组件之自定义顶部导航实例
Jun 12 #Javascript
vue项目中将element-ui table表格写成组件的实现代码
Jun 12 #Javascript
React 全自动数据表格组件——BodeGrid的实现思路
Jun 12 #Javascript
You might like
php连接mssql的一些相关经验及注意事项
2013/02/05 PHP
PHP设计模式之简单投诉页面实例
2016/02/24 PHP
PHP截取发动短信内容的方法
2017/07/04 PHP
javascript 一个自定义长度的文本自动换行的函数
2007/08/19 Javascript
Javascript与flash交互通信基础教程
2008/08/07 Javascript
中止javascript执行的方法
2014/02/14 Javascript
JS辨别访问浏览器判断是android还是ios系统
2014/08/19 Javascript
10个很棒的jQuery代码片段
2015/09/24 Javascript
原生javascript实现分享到朋友圈功能 支持ios和android
2016/05/11 Javascript
js+html5实现canvas绘制网页时钟的方法
2016/05/21 Javascript
HTML5+jQuery插件Quicksand实现超酷的星际争霸2兵种分类展示效果(附demo源码下载)
2016/05/25 Javascript
js将滚动条滚动到指定位置的简单实现方法
2016/06/25 Javascript
AngularJS基础 ng-mouseover 指令简单示例
2016/08/02 Javascript
jQuery基于排序功能实现上移、下移的方法
2016/11/26 Javascript
详解用函数式编程对JavaScript进行断舍离
2017/09/18 Javascript
jQuery+CSS实现的标签页效果示例【测试可用】
2018/08/14 jQuery
vue集成chart.js的实现方法
2019/08/20 Javascript
jquery更改元素属性attr()方法操作示例
2020/05/22 jQuery
[01:00:53]2018DOTA2亚洲邀请赛3月29日 小组赛B组 iG VS Secret
2018/03/30 DOTA
[07:09]DOTA2-DPC中国联赛 正赛 Ehome vs Elephant 选手采访
2021/03/11 DOTA
python实现简单温度转换的方法
2015/03/13 Python
Python3利用SMTP协议发送E-mail电子邮件的方法
2017/09/30 Python
Python wxPython库Core组件BoxSizer用法示例
2018/09/03 Python
Python实现iOS自动化打包详解步骤
2018/10/03 Python
对Python3 goto 语句的使用方法详解
2019/02/16 Python
Python跳出多重循环的方法示例
2019/07/03 Python
python如何求数组连续最大和的示例代码
2020/02/04 Python
Python获取二维数组的行列数的2种方法
2020/02/11 Python
python pymysql链接数据库查询结果转为Dataframe实例
2020/06/05 Python
Python celery原理及运行流程解析
2020/06/13 Python
中国综合性网上购物商城:当当(网上卖书起家)
2016/11/16 全球购物
Raffaello Network西班牙:意大利拉斐尔时尚购物网
2019/03/12 全球购物
俄罗斯达美乐比萨外送服务:Domino’s Pizza
2020/12/18 全球购物
工作会议主持词
2014/03/17 职场文书
浅谈Redis的几个过期策略
2021/05/27 Redis
html实现弹窗的实例
2021/06/09 HTML / CSS