解决vue数据不实时更新的问题(数据更改了,但数据不实时更新)


Posted in Javascript onOctober 27, 2020

一、在我们使用vue进行开发的过程中,可能会遇到一种情况:

当生成vue实例后,当再次给数据赋值时,有时候并不会自动更新到视图上去;

向响应式对象中添加一个属性,并确保这个新属性同样是响应式的,且触发视图更新。它必须用于向响应式对象上添加新属性,因为 Vue 无法探测普通的新增属性 ,需要用vue内置的方法

二、Vue.set() 响应式新增与修改数据

此时我们需要知道Vue.set()需要哪些参数,官方API:https://cn.vuejs.org/v2/api/#Vue-set

调用方法:Vue.set( target, key, value ) 或者 this.$set(target, key, value);

target:要更改的数据源(可以是对象或者数组)

key:要更改的具体数据

value :重新赋的值,

调用:this.$set(target, key, value);

补充知识:vue Render scopedSlots

render 中 slot 的一般默认使用方式如下: this.$slots.default 对用 template的<slot>的使用没有name 。 想使用多个slot 的话。需要对slot命名唯一。

在render函数中动态使用多个slot,并且给slot传值

一、我的业务逻辑:

使用了三个组件,

组件A调用组件B,组件B调用组件C,组件C是自己封装的render渲染组件。

组件A希望将自己自定义的插槽插到C组件,C组件渲染出自定义的内容,并且将C组件的值传递给B组件和A组件,B组件是对C组件进行更大一层的封装

A组件调用B组件

<index-grid>
     <div
      slot="name"
      slot-scope="field"
      class="check-link"
      @click="rowLinkClick"
     >
      <span>{{ field.field.rowData.name }}</span>
     </div>
</index-grid>

A组件引用B组件,slot-scope接收从B组件中传出来solt的值,slot=“name”,是为插槽具名;

B组件中调用C组件的render函数

<sub-grid ref="indexGridSub">
   <span
    v-for="(item, index) in fields"
    :key="index"
    slot="name"
    slot-scope="field"
   >
    <slot name="name" :field="field"></slot>
   </span>
 
  </sub-grid>

B组件span中 slot是动态的值,和A组件中的slot同一个值,才能接受来自A组件自定义的插槽,

field是来自于C组件中传递的值

C组件是render函数

h(
     "td",
     {
      style: { width: field.width + "px" },
      class: { borderRight },
      // 作用域插槽格式
      // { name: props => VNode | Array<VNode> }
      scopedSlots: this.$scopedSlots.name,
      // 如果组件是其他组件的子组件,需为插槽指定名称
      slot: 'name'
     },
     this.$scopedSlots.name({
      field: field,
      rowData: rowData,
     })
    );

C组件往上传递的值就是 {field:'', rowData: ''} 的对象

以上这篇解决vue数据不实时更新的问题(数据更改了,但数据不实时更新)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript入门学习书籍推荐
Jun 12 Javascript
js 判断checkbox是否选中的实现代码
Nov 23 Javascript
node.js中的fs.link方法使用说明
Dec 15 Javascript
《JavaScript DOM 编程艺术》读书笔记之JavaScript 语法
Jan 09 Javascript
浅谈js中变量初始化
Feb 03 Javascript
jQuery拖动元素并对元素进行重新排序
Dec 30 Javascript
XMLHttpRequest Level 2 使用指南
Aug 26 Javascript
微信小程序 css使用技巧总结
Jan 09 Javascript
原生JS实现几个常用DOM操作API实例
Jan 19 Javascript
vue单页应用加百度统计代码(亲测有效)
Jan 31 Javascript
以v-model与promise两种方式实现vue弹窗组件
May 21 Javascript
一篇文章让你搞懂JavaScript 原型和原型链
Nov 23 Javascript
js实现自定义滚动条的示例
Oct 27 #Javascript
vue移动端下拉刷新和上滑加载
Oct 27 #Javascript
Element-UI 使用el-row 分栏布局的教程
Oct 26 #Javascript
解决vue项目运行npm run serve报错的问题
Oct 26 #Javascript
js实现简易拖拽的示例
Oct 26 #Javascript
js实现限定范围拖拽的示例
Oct 26 #Javascript
js实现磁性吸附的示例
Oct 26 #Javascript
You might like
PHP安装攻略:常见问题解答(二)
2006/10/09 PHP
php实现将数据做成json的格式给前端使用
2018/08/21 PHP
Thinkphp 框架配置操作之配置加载与读取配置实例分析
2020/05/15 PHP
js修改input的type属性及浏览器兼容问题探讨与解决
2013/01/23 Javascript
JQuery加载图片自适应固定大小的DIV
2013/09/12 Javascript
js复制网页内容并兼容各主流浏览器的代码
2013/12/17 Javascript
node.js中的url.resolve方法使用说明
2014/12/10 Javascript
JQuery中Text方法用法实例分析
2015/05/18 Javascript
jQuery实现鼠标选文字发新浪微博的方法
2016/04/02 Javascript
js 单引号替换成双引号,双引号替换成单引号的实现方法
2017/02/16 Javascript
微信小程序网络请求wx.request详解及实例
2017/05/18 Javascript
AngularJS路由Ui-router模块用法示例
2017/05/29 Javascript
浅析JS中回调函数及用法
2018/07/25 Javascript
微信小程序tabBar 返回tabBar不刷新页面
2019/07/25 Javascript
详解一些适用于Node.js的命名约定
2019/12/08 Javascript
vue 判断元素内容是否超过宽度的方式
2020/07/29 Javascript
[08:06]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Elephant 选手采访
2021/03/11 DOTA
跟老齐学Python之类的细节
2014/10/13 Python
python使用cStringIO实现临时内存文件访问的方法
2015/03/26 Python
在Django框架中设置语言偏好的教程
2015/07/27 Python
PyQt5每天必学之滑块控件QSlider
2018/04/20 Python
对dataframe进行列相加,行相加的实例
2018/06/08 Python
Python filter过滤器原理及实例应用
2020/08/18 Python
python实现xml转json文件的示例代码
2020/12/30 Python
python在协程中增加任务实例操作
2021/02/28 Python
莫斯科绝对前卫最秘密的商店:SVMoscow
2017/10/23 全球购物
聪明的粉丝购买门票的地方:TickPick
2018/03/09 全球购物
世界上最大的在线汽车租赁预订平台:Rentalcars.com(支持中文)
2018/10/12 全球购物
高尔夫球鞋、服装、手套和装备:FootJoy
2018/12/15 全球购物
薇姿法国官网:Vichy法国
2021/01/28 全球购物
打架检讨书100字
2014/01/19 职场文书
老总助理工作岗位职责
2014/02/06 职场文书
喝酒检查书范文
2014/02/23 职场文书
广告公司文案策划岗位职责
2015/04/14 职场文书
2015年机关作风和效能建设工作总结
2015/07/23 职场文书
python解决12306登录验证码的实现
2021/04/18 Python