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 相关文章推荐
phpwind放自动注册方法
Dec 02 Javascript
基于jquery的无限级联下拉框js插件
Oct 29 Javascript
解决json日期格式问题的3种方法
Feb 02 Javascript
jQuery使用slideUp方法实现控制元素缓慢收起
Mar 27 Javascript
jQuery插件slides实现无缝轮播图特效
Apr 17 Javascript
动态加载JavaScript文件的两种方法
Apr 22 Javascript
Javascript 使用ajax与C#获取文件大小实例详解
Jan 13 Javascript
在vue.js中抽出公共代码的方法示例
Jun 08 Javascript
详解Vue结合后台的列表增删改案例
Aug 21 Javascript
ES6 Object方法扩展的应用实例分析
Jun 25 Javascript
vue拖拽组件 vuedraggable API options实现盒子之间相互拖拽排序
Jul 08 Javascript
vue实现购物车结算功能
Jun 18 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
解析PayPal支付接口的PHP开发方式
2010/11/28 PHP
php 如何获取数组第一个值
2013/08/06 PHP
PHP 返回13位时间戳的实现代码
2016/05/13 PHP
jQuery入门问答 整理的几个常见的初学者问题
2010/02/22 Javascript
基于jQuery架构javascript基础体系
2011/01/01 Javascript
获取div编辑框,textarea,input text的光标位置 兼容IE,FF和Chrome的方法介绍
2012/11/08 Javascript
Jquery多选下拉列表插件jquery multiselect功能介绍及使用
2013/05/24 Javascript
node.js实现多图片上传实例
2014/06/03 Javascript
谷歌地图打不开的解决办法
2014/08/07 Javascript
JavaScript实现添加及删除事件的方法小结
2015/08/04 Javascript
详解JavaScript中的Unescape()和String() 函数
2015/11/09 Javascript
深入理解JS正则表达式---分组
2016/07/18 Javascript
jQuery ready()和onload的加载耗时分析
2016/09/08 Javascript
JavaScript与ActionScript3两者的同性与差异性
2016/09/22 Javascript
网页挂马方式整理及详细介绍
2016/11/03 Javascript
详解node中创建服务进程
2017/05/09 Javascript
JS+canvas实现的五子棋游戏【人机大战版】
2017/07/19 Javascript
Vuejs在v-for中,利用index来对第一项添加class的方法
2018/03/03 Javascript
JavaScript设计模式之代理模式简单实例教程
2018/07/03 Javascript
vue2.0页面前进刷新回退不刷新的实现方法
2018/07/31 Javascript
使用vue2.6实现抖音【时间轮盘】屏保效果附源码
2019/04/24 Javascript
新手如何快速理解js异步编程
2019/06/24 Javascript
微信小程序 确认框的实现(附代码)
2019/07/23 Javascript
解决layer弹出层的内容页点击按钮跳转到新的页面问题
2019/09/14 Javascript
详解ECMAScript2019/ES10新属性
2019/12/06 Javascript
JavaScript随机数的组合问题案例分析
2020/05/16 Javascript
python中尾递归用法实例详解
2015/04/28 Python
python 通过类中一个方法获取另一个方法变量的实例
2019/01/22 Python
如何用Python来理一理红楼梦里的那些关系
2019/08/14 Python
python基于三阶贝塞尔曲线的数据平滑算法
2019/12/27 Python
基于django micro搭建网站实现加水印功能
2020/05/22 Python
详解Python遍历列表时删除元素的正确做法
2021/01/07 Python
css3弹性盒模型(Flexbox)详细介绍
2014/10/08 HTML / CSS
Currentbody澳大利亚:美容仪专家
2019/11/11 全球购物
2015年妇联工作总结范文
2015/04/22 职场文书
python数字图像处理之图像自动阈值分割示例
2022/06/28 Python