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 相关文章推荐
基于Jquery的动态添加控件并取值的实现代码
Sep 24 Javascript
xmlhttp缓存清除的2种解决方法
Dec 13 Javascript
jQuery中append()方法用法实例
Dec 25 Javascript
Javascript中的五种数据类型详解
Dec 26 Javascript
javascript实现多栏闭合展开式广告位菜单效果实例
Aug 05 Javascript
jQuery移动页面开发中的触摸事件与虚拟鼠标事件简介
Dec 03 Javascript
如何检测JavaScript的各种类型
Jul 30 Javascript
浅谈使用React.setState需要注意的三点
Dec 18 Javascript
使用JavaScript破解web
Sep 28 Javascript
js找出5个数中最大的一个数和倒数第二大的数实现方法示例小结
Mar 04 Javascript
javascript设计模式 ? 命令模式原理与用法实例分析
Apr 20 Javascript
解读Vue组件注册方式
May 15 Vue.js
浅谈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
德劲1103二次变频版的打磨
2021/03/02 无线电
ajax返回值中有回车换行、空格的解决方法分享
2013/10/24 PHP
Fedora下安装php Redis扩展笔记
2014/09/03 PHP
PHP依赖倒置(Dependency Injection)代码实例
2014/10/11 PHP
Mac下php 5升级到php 7的步骤详解
2017/04/26 PHP
Laravel学习教程之View模块详解
2017/09/18 PHP
Laravel自动生成UUID,从建表到使用详解
2019/10/24 PHP
jquery 页面全选框实践代码
2010/04/02 Javascript
js取滚动条的尺寸的函数代码
2011/11/30 Javascript
nodejs命令行参数处理模块commander使用实例
2014/09/17 NodeJs
JS简单计算器实例
2015/01/20 Javascript
JS实现网页滚动条感应鼠标变色的方法
2015/02/26 Javascript
使用JQuery实现智能表单验证功能
2016/03/08 Javascript
IOS中safari下的select下拉菜单文字过长不换行的解决方法
2016/09/26 Javascript
JS基于onclick事件实现单个按钮的编辑与保存功能示例
2017/02/13 Javascript
vue 运用mock数据的示例代码
2017/11/07 Javascript
图片懒加载imgLazyLoading.js使用详解
2020/09/15 Javascript
详解swiper在vue中的应用(以3.0为例)
2018/09/20 Javascript
详解Vue 项目中的几个实用组件(ts)
2019/10/29 Javascript
Python读取图片为16进制表示简单代码
2018/01/19 Python
Python获取基金网站网页内容、使用BeautifulSoup库分析html操作示例
2019/06/04 Python
Python GUI编程 文本弹窗的实例
2019/06/11 Python
python代码编写计算器小程序
2020/03/30 Python
Python实现线性插值和三次样条插值的示例代码
2019/11/13 Python
python使用多线程+socket实现端口扫描
2020/05/28 Python
python des,aes,rsa加解密的实现
2021/01/16 Python
新闻网站实习自我鉴定
2013/09/25 职场文书
实习鉴定范文
2013/12/19 职场文书
电子商务网站的创业计划书
2014/01/05 职场文书
教师自查自纠材料
2014/10/14 职场文书
怎么写工作检讨书
2014/11/16 职场文书
出国留学导师推荐信
2015/03/26 职场文书
师范生教育见习总结
2015/06/23 职场文书
你为什么是穷人?可能是这5个缺点造成
2019/07/11 职场文书
传单、海报早OUT了,另类传单营销方案送给你!
2019/07/15 职场文书
Spring Cloud OAuth2实现自定义token返回格式
2022/06/25 Java/Android