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 相关文章推荐
获取URL地址中的文件名和参数的javascript代码
Sep 02 Javascript
40个有创意的jQuery图片和内容滑动及弹出插件收藏集之三
Jan 03 Javascript
js判断FCKeditor内容是否为空的两种形式
May 14 Javascript
AngularJS实现表单验证
Jan 28 Javascript
jquery.fastLiveFilter.js实现输入自动过滤的方法
Aug 11 Javascript
微信小程序侧边栏滑动特效(左右滑动)
Jan 23 Javascript
分享Bootstrap简单表格、表单、登录页面
Aug 04 Javascript
vue.js父子组件通信动态绑定的实例
Sep 28 Javascript
详解微信小程序开发(项目从零开始)
Jun 06 Javascript
layui table 列宽百分比显示的实现方法
Sep 28 Javascript
基于aotu.js实现微信自动添加通讯录中的联系人功能
May 28 Javascript
关于element的表单组件整理笔记
Feb 05 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 SQLite类
2009/05/07 PHP
PHP高自定义性安全验证码代码
2011/11/27 PHP
关于使用coreseek并为其做分页的介绍
2013/06/21 PHP
PHPWind9.0手动屏蔽验证码解决后台关闭验证码但是依然显示的问题
2016/08/12 PHP
php操作路径的经典方法(必看篇)
2016/10/04 PHP
简单的Jquery遮罩层代码实例
2013/11/14 Javascript
从QQ网站中提取的纯JS省市区三级联动菜单
2013/12/25 Javascript
js时间比较示例分享(日期比较)
2014/03/05 Javascript
jquery实现类似EasyUI的页面布局可改变左右的宽度
2020/09/12 Javascript
JavaScript判断前缀、后缀是否是空格的方法
2015/04/15 Javascript
js网页滚动条滚动事件实例分析
2015/05/05 Javascript
Nodejs中 npm常用命令详解
2016/07/04 NodeJs
js基于cookie记录来宾姓名的方法
2016/07/19 Javascript
jQuery实现动态文字搜索功能
2017/01/05 Javascript
快速解决angularJS中用post方法时后台拿不到值的问题
2018/08/14 Javascript
vue动态绑定class选中当前列表变色的方法示例
2018/12/19 Javascript
vue项目首屏加载时间优化实战
2019/04/23 Javascript
JQuery属性操作与循环用法示例
2019/05/15 jQuery
Vue的生命周期操作示例
2019/09/17 Javascript
JS+CSS实现动态时钟
2021/02/19 Javascript
[41:41]TFT vs Secret Supermajor小组赛C组 BO3 第一场 6.3
2018/06/04 DOTA
python实现爬虫下载美女图片
2015/07/14 Python
python处理Excel xlrd的简单使用
2017/09/12 Python
对python多线程SSH登录并发脚本详解
2019/02/14 Python
python打开windows应用程序的实例
2019/06/28 Python
用Python抢火车票的简单小程序实现解析
2019/08/14 Python
python 爬取百度文库并下载(免费文章限定)
2020/12/04 Python
C语言面试题
2013/05/19 面试题
Java如何调用外部Exe程序
2015/07/04 面试题
市场安全管理制度
2014/01/26 职场文书
菜篮子工程实施方案
2014/03/08 职场文书
普通党员个人剖析材料
2014/10/08 职场文书
街道党风廉政建设调研报告
2015/01/01 职场文书
2016入党积极分子党课学习心得体会
2015/10/09 职场文书
2016新年问候语大全
2015/11/11 职场文书
Docker下安装Oracle19c
2022/04/13 Servers