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 相关文章推荐
JS中类或对象的定义说明
Mar 10 Javascript
Jquery操作Ajax方法小结
Nov 29 Javascript
原生js实现瀑布流布局
Mar 08 Javascript
深入理解Angular.JS中的Scope继承
Jun 04 Javascript
使用Dropzone.js上传的示例代码
Oct 10 Javascript
微信小程序左滑动显示菜单功能的实现
Jun 14 Javascript
微信jssdk逻辑在vue中的运用详解
Nov 14 Javascript
Vue.js实现可排序的表格组件功能示例
Feb 19 Javascript
运用js实现图层拖拽的功能
May 24 Javascript
中高级前端必须了解的JS中的内存管理(推荐)
Jul 04 Javascript
Vue解析剪切板图片并实现发送功能
Feb 04 Javascript
微信小程序实现分页加载效果
Nov 19 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
大师制作的中短波矿石收音机
2020/04/02 无线电
PHP 高手之路(三)
2006/10/09 PHP
PHP 各种排序算法实现代码
2009/08/20 PHP
用php实现的获取网页中的图片并保存到本地的代码
2010/01/05 PHP
PHP正则替换函数preg_replace和preg_replace_callback使用总结
2014/09/22 PHP
PHP+jQuery 注册模块的改进(一):验证码存入SESSION
2014/10/14 PHP
php显示指定目录下子目录的方法
2015/03/20 PHP
简单的pgsql pdo php操作类实现代码
2016/08/25 PHP
Centos7 Yum安装PHP7.2流程教程详解
2019/07/02 PHP
Jquery 表单取值赋值的一些基本操作
2009/10/11 Javascript
jquery文字上下滚动的实现方法
2013/03/22 Javascript
简单的两种Extjs formpanel加载数据的方式
2013/11/09 Javascript
JavaScript设计模式之单例模式实例
2014/09/24 Javascript
jQuery原型属性和原型方法详解
2015/07/07 Javascript
Highcharts 多个Y轴动态刷新数据的实现代码
2016/05/28 Javascript
vue2的todolist入门小项目的详细解析
2017/05/11 Javascript
JS实现浏览上传文件的代码
2017/08/23 Javascript
javascript如何用递归写一个简单的树形结构示例
2017/09/06 Javascript
Node.js中sequelize时区的配置方法
2017/12/10 Javascript
python中使用sys模板和logging模块获取行号和函数名的方法
2014/04/15 Python
Python创建文件和追加文件内容实例
2014/10/21 Python
python实现颜色空间转换程序(Tkinter)
2015/12/31 Python
Python 两个列表的差集、并集和交集实现代码
2016/09/21 Python
Python 删除连续出现的指定字符的实例
2018/06/29 Python
python自动发送测试报告邮件功能的实现
2019/01/22 Python
Python3.5 Pandas模块之Series用法实例分析
2019/04/23 Python
Python基础之高级变量类型实例详解
2020/01/03 Python
解决tensorflow添加ptb库的问题
2020/02/10 Python
浅谈CSS3动画的回调处理
2016/07/21 HTML / CSS
淘宝中秋节活动方案
2014/01/31 职场文书
《童年》教学反思
2014/02/18 职场文书
幼儿园新年寄语
2014/04/03 职场文书
敬老院献爱心活动总结
2014/07/08 职场文书
计划生育汇报材料
2014/12/26 职场文书
Python基于百度API识别并提取图片中文字
2021/06/27 Python
总结python多进程multiprocessing的相关知识
2021/06/29 Python