详解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 相关文章推荐
取得父标签
Nov 14 Javascript
js实现兼容IE6与IE7的DIV高度
May 13 Javascript
Jquery 点击按钮显示和隐藏层的代码
Jul 25 Javascript
jquery 使用简明教程
Mar 05 Javascript
详解AngularJS中的表格使用
Jun 16 Javascript
jquery实现滑动特效代码
Aug 10 Javascript
省市区三级联动下拉框菜单javascript版
Aug 11 Javascript
Bootstrap栅格系统的使用和理解2
Dec 14 Javascript
js封装tab标签页实例分享
Dec 19 Javascript
canvas绘制多边形
Feb 24 Javascript
jQuery实现火车票买票城市选择切换功能
Sep 15 jQuery
express + jwt + postMan验证实现持久化登录
Jun 05 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 和 XML: 使用expat函数(三)
2006/10/09 PHP
国外比较好的几个的Php开源建站平台小结
2010/04/22 PHP
Yii2.0预定义的别名功能小结
2016/07/04 PHP
Yii2框架RESTful API 格式化响应,授权认证和速率限制三部分详解
2016/11/10 PHP
js GridView 实现自动计算操作代码
2009/03/25 Javascript
jQuery 学习6 操纵元素显示效果的函数
2010/02/07 Javascript
js 遍历json返回的map内容示例代码
2013/10/29 Javascript
node.js中的fs.readlinkSync方法使用说明
2014/12/17 Javascript
javascript判断移动端访问设备并解析对应CSS的方法
2015/02/05 Javascript
js实现表单Radio切换效果的方法
2015/08/17 Javascript
jQuery validate+artdialog+jquery form实现弹出表单思路详解
2016/04/18 Javascript
jQuery each函数源码分析
2016/05/25 Javascript
在vue-cli脚手架中配置一个vue-router前端路由
2017/07/03 Javascript
jQuery查找和过滤_动力节点节点Java学院整理
2017/07/04 jQuery
js 倒计时(高效率服务器时间同步)
2017/09/12 Javascript
layui的table中显示图片方法
2018/08/17 Javascript
express 项目分层实践详解
2018/12/10 Javascript
js实现点击生成随机div
2020/01/16 Javascript
javascript实现前端分页效果
2020/06/24 Javascript
[00:12]DAC2018 no[o]ne亮相SOLO赛 他是否如他的id一样无人可挡?
2018/04/06 DOTA
python实现简单的socket server实例
2015/04/29 Python
python实现简易云音乐播放器
2018/01/04 Python
谈谈python中GUI的选择
2018/03/01 Python
python+selenium+Chrome options参数的使用
2020/03/18 Python
Selenium常见异常解析及解决方案示范
2020/04/10 Python
Python爬虫如何应对Cloudflare邮箱加密
2020/06/24 Python
吃透移动端 Html5 响应式布局
2019/12/16 HTML / CSS
美国学校用品、教室和教学商店:Discount School Supply
2018/04/04 全球购物
Kappa英国官方在线商店:服装和运动器材
2020/11/22 全球购物
护士求职信范文
2014/05/24 职场文书
改作风抓落实促发展心得体会
2014/09/10 职场文书
小学生光盘行动倡议书
2015/04/28 职场文书
关于教师节的广播稿
2015/08/19 职场文书
三好学生竞选稿
2015/11/21 职场文书
Python中requests做接口测试的方法
2021/05/30 Python
MySQL事务的隔离级别详情
2022/07/15 MySQL