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对象与DOM对象之间的转换方法
Apr 15 Javascript
IE6-IE9使用JSON、table.innerHTML所引发的问题
Dec 22 Javascript
javascript特殊日历控件分享
Mar 07 Javascript
总结JavaScript三种数据存储方式之间的区别
May 03 Javascript
javascript中href和replace的比较(详解)
Nov 25 Javascript
JavaScript时间戳与时间日期间相互转换
Dec 11 Javascript
详解小程序如何避免多次点击,重复触发事件
Apr 08 Javascript
jQuery子选择器与可见性选择器实例分析
Jun 28 jQuery
layer关闭当前窗口页面以及确认取消按钮的方法
Sep 09 Javascript
JavaScript 类的封装操作示例详解
May 16 Javascript
vue结合el-upload实现腾讯云视频上传功能
Jul 01 Javascript
Vue+Flask实现图片传输功能
Apr 01 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
php通过asort()给关联数组按照值排序的方法
2015/03/18 PHP
php blowfish加密解密算法
2016/07/02 PHP
PHP简单实现解析xml为数组的方法
2018/05/02 PHP
php5与php7的区别点总结
2019/10/11 PHP
greybox——不开新窗口看新的网页
2007/02/20 Javascript
IE浏览器打印的页眉页脚设置解决方法
2009/12/08 Javascript
javascript中的作用域scope介绍
2010/12/28 Javascript
JavaScript实现自己的DOM选择器原理及代码
2013/03/04 Javascript
JS实现下拉框的动态添加(附效果)
2013/04/03 Javascript
jQuery实现模拟marquee标签效果
2015/07/14 Javascript
四种参数传递的形式——URL,超链接,js,form表单
2015/07/24 Javascript
Bootstrap中文本框的宽度变窄并且加入一副验证码图片的实现方法
2016/06/23 Javascript
浅谈javascript中执行环境(作用域)与作用域链
2016/12/08 Javascript
jQuery操作复选框(CheckBox)的取值赋值实现代码
2017/01/10 Javascript
微信小程序url传参写变量的方法
2018/08/09 Javascript
Nodejs模块的调用操作实例分析
2018/12/25 NodeJs
jQuery实现动态添加和删除input框实例代码
2019/03/26 jQuery
python实现网页链接提取的方法分享
2014/02/25 Python
Python中matplotlib中文乱码解决办法
2017/05/12 Python
利用Tkinter(python3.6)实现一个简单计算器
2017/12/21 Python
使用apidoc管理RESTful风格Flask项目接口文档方法
2018/02/07 Python
Python批量生成幻影坦克图片实例代码
2019/06/04 Python
iframe在移动端的缩放的示例代码
2018/10/12 HTML / CSS
美国女士时尚珠宝及配饰购物网站:Icing
2018/07/02 全球购物
Hotels.com日本:国外和海外住宿,酒店预订
2019/12/13 全球购物
师德学习感言
2014/01/31 职场文书
党课培训主持词
2014/04/01 职场文书
优秀毕业生的求职信
2014/07/21 职场文书
十佳少先队员演讲稿
2014/09/12 职场文书
国家税务局领导班子对照检查材料思想汇报
2014/10/04 职场文书
项目投资意向书范本
2015/05/09 职场文书
JavaScript 去重和重复次数统计
2021/03/31 Javascript
pytorch常用数据类型所占字节数对照表一览
2021/05/17 Python
Java基础之详解HashSet的使用方法
2021/06/30 Java/Android
36个正则表达式(开发效率提高80%)
2021/11/17 Javascript
CSS中使用grid布局实现一套模板多种布局
2022/07/15 HTML / CSS