vue设置对象属性,vue给元素添加自定义属性

  vue设置对象属性,vue给元素添加自定义属性

  本文主要介绍了vue中的自定义属性以及获取属性值的方法,具有很好的参考价值。希望对大家有帮助。如有错误或不足之处,请不吝赐教。

  

目录

  自定义属性并获取属性的值,比如自定义属性的理解——道具。为什么最初道具问题出现的时候会出现双向流的问题?补充问题

  

自定义属性并获得属性的值

  

例如

  数据半径语法:数据属性

  vue:

  div @ mouse over= change radius($ event) @ mouse out= change radius(false) @ click= set location($ event)

  分区数据-半径= 100 100米/分区

  分区数据-半径= 300 300米/分区

  分区数据-半径= 500 500米/分区

  分区数据-半径= 1000 1000米/分区

  /div

  获取以下属性的值:ev.target.dataset.radius

  方法:

  setlocation:函数(ev){

  this . disradius=ev . target . dataset . radius 米

  }

  

对自定义属性--props的理解

  最近,在学习了vue之后,我正在做一个项目。但是我在跟踪项目的时候发现了一个问题:道具自定义属性可以读写,数据流变成了双向问题。

  

初始props

  在学习之初,我对props的理解是只能读不能写,同时作为组件之间传递值的工具,父组件向子组件单向流动数据。

  

问题的出现

  将代码放在这里:

  使用vue检查页面中的数据确实会改变数据。

  然而,当我在做别人的项目时,我发现父组件和子组件中的数据是双向流动的,eslint规范报告了一个错误。今天查阅道具文档时,原文如下:

  的所有属性在其父属性和子属性之间形成单向向下绑定:父属性的更新将向下流动到子组件,但反之则不然。这将防止子组件意外更改父组件的状态,从而使应用程序的数据流难以理解。

  发现props数据的单向流动不是固定的,它通常是单向的,但当数据是对象和数组时,它可以双向流动。

  

为什么会发生双向流动的问题?

  原因:注意,在JavaScript中,对象和数组是通过引用传入的,所以对于数组或对象类型prop,在子组件中改变这个对象或数组本身会影响父组件的状态。

  总结:

  1.为了规范自己的代码编写,你会保证这个道具在以后用来传递一个初始值;接下来,当这个子组件想把它作为一个本地的道具数据使用时,它就会被存储在data data中,可以读写。

  2.对于双向流动的问题,不要直接修改道具价值。当父组件需要子组件的值时,将子组件的值传递给父组件(这里还有一个问题,后面会补充)。

  

补充问题

  前面说过,道具自定义属性不能写,其实是为了限制数据流的混乱,所以是只读不写的,所以这里可以写数组和对象。

  代码证明:

  this . table data=this . table data . filter((item,index)=index!==我)

  const id=this.tableData[i]。编号

  不过最后为了标准化,把数据保存到data,修改了代码。而且还有数据异步的问题(在下一篇文章中已经解决了)。

  以上个人经历,希望能给大家一个参考,也希望大家多多支持我们。

郑重声明:本文由网友发布,不代表盛行IT的观点,版权归原作者所有,仅为传播更多信息之目的,如有侵权请联系,我们将第一时间修改或删除,多谢。

留言与评论(共有 条评论)
   
验证码: