vue 子组件修改data或调用操作


Posted in Javascript onAugust 07, 2020

<子组件 ref='xxx'></子组件>

父组件:

this.refs.xxx.子组件定义的方法()

外部:

vm.$refs.xxx.子组件定义的方法()

注意:子组件添加 ref 属性,父组件才可以通过 refs 获取.

补充知识:vue更新data值,如何重新渲染组件?

一:先介绍一下Vue.set()方法

注:如果从服务端返回的数据量较少,或者只有几个字段,可以用vue的set方法,如果数据量较大,请直接看第二种情况。

官网API是这样介绍的:

Vue.set(target,key,value)

参数:

{Object | Array} target

{string | number} key

{any} value

返回值:设置完后的新值

用法:

向响应式对象中添加一个属性,并确保这个新属性同样是响应式的,且触发视图更新。它必须用于向响应式对象上添加新属性,因为 Vue 无法探测普通的新增属性 (比如 this.myObject.newProperty = ‘hi')

注意对象不能是 Vue 实例,或者 Vue 实例的根数据对象。

我举个简单的小例子,把这种用法介绍一下:

一:data中定义一个对象:

data() {
 return {
  person:{
  age:10,
  name:'李古拉雷',
  sex:1
  }
 }
}

二:从服务端发起请求返回新数据对象:

person:{
 age:20,
 name:'高圆圆',
 sex:0
}

这时需要把这个对象实时渲染到页面中去

三:用 Vue.set()方法更新数据

如下所示:

methods: {
 getPerson(){
  this.$http({
  method: "post",
  url:this.$$baseURL + "sys/getPerson",
 }).then(res => {
  Vue.set(this.person,0,{age:res.data.age,name:res.data.name,sex:res.data.sex})
/**
* 0 更新的是位置0上的数据
*
*/
});
}
}

这样从服务端返回的新数据就实时更新到组件上了。

下面说一下第二种情况:

这种情况就是数据量较大,字段较多的,使用Vue.set()方法就有点过分了,这时我们应该怎么做呢?

核心思想就是定义一个临时变量,因computed 是计算属性,这里面的值更细可以实时渲染组件更新页面。

一:我们在data中定义一个很大的临时对象

data() {
 return {
 myTempObj:{} // 这时一个很大的临时对象,字段特别多
 }
}

二:我们在计算属性中也定义一个很大的对象

这个对象是我们在页面中真正用到的对象

computed: {
 myObj: {
  get: function(){
  return this.myTempObj; // 在这里把临时对象的值通过计算属性赋值给页面中用到的对象
  }
 },
}

三:发起异步请求,从服务端返回数据

methods: {
 getBigObj(){
  this.$http({
  method: "post",
  url:this.$$baseURL + "sys/getBigObj",
 }).then(res => {
  this.myTempObj=res.bigObj ; // 在这里用临时变量接受服务端返回值
});
}
}

四:页面模板组件中使用方法

<div class="brand-list bybrand_list" v-for="(item, index) in myObj" :key="index">
 {{item.name}}
</div>

以上两种情况都可以解决从服务端取到的数据不能实时更新问题,根据具体情况选择使用!希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript 动态调整图片尺寸实现代码
Dec 28 Javascript
javascript 实用的文字链提示框效果
Jun 30 Javascript
js模拟类继承小例子
Jul 17 Javascript
在JavaScript中判断整型的N种方法示例介绍
Jun 18 Javascript
基于javascript bootstrap实现生日日期联动选择
Apr 07 Javascript
AngularJS实现DOM元素的显示与隐藏功能
Nov 22 Javascript
jquery与ajax获取特殊字符实例详解
Jan 08 Javascript
JS实现二叉查找树的建立以及一些遍历方法实现
Apr 17 Javascript
node.js+jQuery实现用户登录注册AJAX交互
Apr 28 jQuery
Vue.js中extend选项和delimiters选项的比较
Jul 17 Javascript
实现单层json按照key字母顺序排序的示例
Dec 06 Javascript
laravel实现中文和英语互相切换的例子
Sep 30 Javascript
浅谈vue生命周期共有几个阶段?分别是什么?
Aug 07 #Javascript
使用纯前端JavaScript实现Excel导入导出方法过程详解
Aug 07 #Javascript
浅谈vue中$event理解和框架中在包含默认值外传参
Aug 07 #Javascript
javascript前端和后台进行数据交互方法示例
Aug 07 #Javascript
javascript解析json格式的数据方法详解
Aug 07 #Javascript
Vue触发input选取文件点击事件操作
Aug 07 #Javascript
vue+element获取el-table某行的下标,根据下标操作数组对象方式
Aug 07 #Javascript
You might like
基于数据库的在线人数,日访问量等统计
2006/10/09 PHP
php 模拟POST提交的2种方法详解
2013/06/17 PHP
IIS6.0中配置php服务全过程解析
2013/08/07 PHP
php基于Fleaphp框架实现cvs数据导入MySQL的方法
2016/02/23 PHP
php、mysql查询当天,查询本周,查询本月的数据实例(字段是时间戳)
2017/02/04 PHP
Laravel 批量更新多条数据的示例
2017/11/27 PHP
Jquery数独游戏解析(一)-页面布局
2010/11/05 Javascript
HTML颜色选择器实现代码
2010/11/23 Javascript
倒记时60刷新网页的js代码
2014/02/18 Javascript
js实现文本框输入文字个数限制代码
2015/12/25 Javascript
用headjs来管理和加载js 提高网站加载速度
2016/11/29 Javascript
jQuery操作json常用方法示例
2017/01/04 Javascript
ionic实现下拉刷新载入数据功能
2017/05/11 Javascript
JavaScript30 一个月纯 JS 挑战中文指南(英文全集)
2017/07/23 Javascript
vue中七牛插件使用的实例代码
2017/07/28 Javascript
深入学习TypeScript 、React、 Redux和Ant-Design的最佳实践
2019/06/17 Javascript
javascript删除数组元素的七个方法示例
2019/09/09 Javascript
Vue 实例事件简单示例
2019/09/19 Javascript
vue移动端弹起蒙层滑动禁止底部滑动操作
2020/07/22 Javascript
[00:12]2018DOTA2亚洲邀请赛 Sccc亮相SOLO赛,今年他又会有什么样的战绩?
2018/04/06 DOTA
[01:01:29]2018DOTA2亚洲邀请赛 4.4 淘汰赛 VP vs Liquid 第一场
2018/04/05 DOTA
[19:54]夜魇凡尔赛茶话会 第一期02:看图识人
2021/03/11 DOTA
Python运行的17个时新手常见错误小结
2012/08/07 Python
浅谈python字典多键值及重复键值的使用
2016/11/04 Python
python从list列表中选出一个数和其对应的坐标方法
2019/07/20 Python
python plotly绘制直方图实例详解
2019/07/22 Python
如何在Django项目中引入静态文件
2019/07/26 Python
python3使用print打印带颜色的字符串代码实例
2019/08/22 Python
pycharm 2019 最新激活方式(pycharm破解、激活)
2020/09/22 Python
如何在Python 游戏中模拟引力
2020/03/27 Python
Python如何在bool函数中取值
2020/09/21 Python
基于Django快速集成Echarts代码示例
2020/12/01 Python
客户表扬信范文
2014/01/10 职场文书
党的群众教育实践活动实施方案
2014/06/12 职场文书
公司活动总结范文
2014/07/01 职场文书
刑事撤诉申请书
2015/05/18 职场文书