详解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 相关文章推荐
提高代码性能技巧谈—以创建千行表格为例
Jul 01 Javascript
JS中获取函数调用链所有参数的方法
May 07 Javascript
jQuery旋转木马式幻灯片轮播特效
Dec 04 Javascript
javascript时间戳和日期字符串相互转换代码(超简单)
Jun 22 Javascript
学习使用jQuery表单验证插件和日历插件
Feb 13 Javascript
Vue.js 2.0 移动端拍照压缩图片上传预览功能
Mar 06 Javascript
详谈js对url进行编码和解码(三种方式的区别)
Aug 16 Javascript
vue移动端路由切换实例分析
May 14 Javascript
Vue axios全局拦截 get请求、post请求、配置请求的实例代码
Nov 28 Javascript
localstorage实现带过期时间的缓存功能
Jun 28 Javascript
Layui 带多选框表格监听事件以及按钮自动点击写法实例
Sep 02 Javascript
React + Threejs + Swiper 实现全景图效果的完整代码
Jun 28 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
DOTA2【瓜皮时刻】Vol.91 RTZ山史最惨“矿难”
2021/03/05 DOTA
PHP5+UTF8多文件上传类
2008/10/17 PHP
php重定向的三种方法分享
2012/02/22 PHP
PHP is_subclass_of函数的一个BUG和解决方法
2014/06/01 PHP
PHP记录页面停留时间的方法
2016/03/30 PHP
php 人员权限管理(RBAC)实例(推荐)
2017/05/24 PHP
Symfony查询方法实例小结
2017/06/28 PHP
PHP实现防盗链的方法分析
2017/07/25 PHP
PHP中rename()函数的妙用讲解
2019/02/28 PHP
解决表单中第一个非隐藏的元素获得焦点的一个方案
2009/10/26 Javascript
基于Jquery实现的一个图片滚动切换
2012/06/21 Javascript
jquery实现手机发送验证码的倒计时代码
2014/02/12 Javascript
jQuery的选择器中的通配符使用介绍
2014/03/20 Javascript
jquery右下角自动弹出可关闭的广告层
2015/05/08 Javascript
javascript cookie用法基础教程(概念,设置,读取及删除)
2016/09/20 Javascript
微信小程序 实例开发总结
2017/04/26 Javascript
详解angularjs 关于ui-router分层使用
2017/06/12 Javascript
基于vue配置axios的方法步骤
2017/11/09 Javascript
node.js基于express使用websocket的方法
2017/11/09 Javascript
vue项目优化之通过keep-alive数据缓存的方法
2017/12/11 Javascript
Bootstarp在pycharm中的安装及简单的使用方法
2019/04/19 Javascript
Vue2(三)实现子菜单展开收缩,带动画效果实现方法
2019/04/28 Javascript
vue.js中ref及$refs的使用方法解析
2019/10/08 Javascript
python实现清屏的方法
2015/04/30 Python
在Python的struct模块中进行数据格式转换的方法
2015/06/17 Python
Python实现对excel文件列表值进行统计的方法
2015/07/25 Python
python爬虫模块URL管理器模块用法解析
2020/02/03 Python
matplotlib图例legend语法及设置的方法
2020/07/28 Python
使用css实现android系统的loading加载动画
2019/07/25 HTML / CSS
瑞士图书网站:Weltbild.ch
2019/09/17 全球购物
药学专业个人自我评价
2013/11/11 职场文书
办公室驾驶员岗位职责
2013/11/15 职场文书
2014年电厂个人工作总结
2014/11/27 职场文书
安全先进班组材料
2014/12/26 职场文书
同乡会致辞
2015/07/30 职场文书
创业计划书之淘宝网店
2019/10/08 职场文书