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的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。