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 相关文章推荐
静态的动态续篇之来点XML
Dec 23 Javascript
jQuery对表单的操作代码集合
Apr 06 Javascript
js弹出框轻量级插件jquery.boxy使用介绍
Jan 15 Javascript
js post提交调用方法
Feb 12 Javascript
JS中判断JSON数据是否存在某字段的方法
Mar 07 Javascript
一个JS函数搞定网页标题(title)闪动效果
May 13 Javascript
在JavaScript中操作时间之setYear()方法的使用
Jun 12 Javascript
用Vue.js实现监听属性的变化
Nov 17 Javascript
jQuery+Cookie实现切换皮肤功能【附源码下载】
Mar 25 jQuery
微信小程序之左右布局的实现代码
Dec 13 Javascript
小程序实现长按保存图片的方法
Dec 31 Javascript
Vue使用路由钩子拦截器beforeEach和afterEach监听路由
Nov 16 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
一篇入门的php Class 文章
2007/04/04 PHP
在JavaScript中调用php程序
2009/03/09 PHP
php如何控制用户对图片的访问 PHP禁止图片盗链
2016/03/25 PHP
php 7新特性之类型申明详解
2017/06/06 PHP
PHP cookie,session的使用与用户自动登录功能实现方法分析
2019/06/05 PHP
jQuery最佳实践完整篇
2011/08/20 Javascript
JQuery实现防止退格键返回的方法
2015/02/12 Javascript
javascript显式类型转换实例分析
2015/04/25 Javascript
分享12个非常实用的JavaScript小技巧
2016/05/11 Javascript
JavaScript 数组some()和filter()的用法及区别
2016/05/20 Javascript
RequireJS多页面应用实例分析
2016/06/29 Javascript
AngularJS教程之MVC体系结构详解
2016/08/16 Javascript
JavaScript中定义对象原型的两种使用方法
2016/12/15 Javascript
原生js编写2048小游戏
2017/03/17 Javascript
jquery插件canvaspercent.js实现百分比圆饼效果
2017/07/18 jQuery
浅谈JS获取元素的N种方法及其动静态讨论
2017/08/25 Javascript
vue项目引入Iconfont图标库的教程图解
2018/10/24 Javascript
Vuex实现购物车小功能
2020/08/17 Javascript
wxPython使用系统剪切板的方法
2015/06/16 Python
Python使用cookielib模块操作cookie的实例教程
2016/07/12 Python
python常见排序算法基础教程
2017/04/13 Python
python 3.7.0 下pillow安装方法
2018/08/27 Python
python爬取盘搜的有效链接实现代码
2019/07/20 Python
python [:3] 实现提取数组中的数
2019/11/27 Python
python mysql中in参数化说明
2020/06/05 Python
Python RabbitMQ实现简单的进程间通信示例
2020/07/02 Python
IE滤镜与CSS3效果(详细整理分享)
2013/01/25 HTML / CSS
Foot Locker意大利官网:全球领先的运动鞋和服装零售商
2017/05/30 全球购物
世界顶级足球门票网站:Live Football Tickets
2017/10/14 全球购物
Parfumdreams英国:香水和化妆品
2019/05/10 全球购物
委托证明的格式
2014/01/10 职场文书
初中升旗仪式演讲稿
2014/05/08 职场文书
小学安全汇报材料
2014/08/14 职场文书
2014年法务工作总结
2014/12/11 职场文书
优秀党支部申报材料
2014/12/24 职场文书
运动会加油稿50字
2015/07/21 职场文书