vue中的自定义属性并获得属性的值方式
自定义属性并获得属性的值
例如
data-radius语法： data-属性
vue:
<div @mouseover='changeRadius($event)' @mouseout='changeRadius(false)' @click='setlocation($event)'> <div data-radius='100'>100m</div> <div data-radius='300'>300m</div> <div data-radius='500'>500m</div> <div data-radius='1000'>1000m</div> </div>
获取属性的值：ev.target.dataset.radius
methods:
setlocation:function(ev){
this.dispradius = ev.target.dataset.radius + '米'
}对自定义属性--props的理解
由于最近学习完vue在做项目，但是在跟做项目时，发现一个问题就是props自定义属性出现了可以读也可以写，并且数据流向成了双向的问题。
初始props
在刚刚学习的时候，对于props的了解是只能读不能写,并且同时它还是作为组件之间值传递的工具，父组件对子组件单向数据流动
问题的出现
此处放代码：
在页面中用vue去查数据的确发生了数据的更改
但是在跟做别人的项目时，发现父组件和子组件中数据出现了双向流动，并且eslint规范报了错误，今天查阅props文档的时候，原文如下：
所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定：父级 prop 的更新会向下流动到子组件中，但是反过来则不行。这样会防止从子组件意外变更父级组件的状态，从而导致你的应用的数据流向难以理解。
发现props数据单向流动并不是固定死的，它是通常情况下都是单向流动，但是它在数据为对象和数组时，是可以发生双向流动
为什么会发生双向流动的问题？
原因：注意在 JavaScript 中对象和数组是通过引用传入的，所以对于一个数组或对象类型的 prop 来说，在子组件中改变变更这个对象或数组本身将会影响到父组件的状态。
总结：
1、为了规范自己的代码书写，以后将保证当要这个 prop 用来传递一个初始值；这个子组件接下来希望将其作为一个本地的 prop 数据来使用时，将其存储到data数据中，data的数据是可读写的
2、对于双向流动的问题，不去直接修改props的值，当父组件在需要子组件的值时，再进行子向父传值（此处还有一个问题，随后补充）
补充问题
前面说到props自定义属性不能写，其实是为了限制数据流向混乱，因此只读不写，所以这里数组和对象是可以写的。
代码证明：
this.tableData = this.tableData.filter((item, index) => index !== i)
const id = this.tableData[i].id但是最后为了规范，还是将数据存到了data，进行了代码修改。而且也出现了数据异步的问题（已经解决在后面的文章）。
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
keep-Alive搭配vue-router实现缓存页面效果的示例代码
这篇文章主要介绍了keep-Alive搭配vue-router实现缓存页面效果,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2020-06-06
本文主要介绍了vue2实现传送门效果的示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-04-04
这篇文章主要介绍了vue打包后的线上部署Apache、nginx全过程，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-02-02
最近项目中让实现一个导入导出Excel的功能,下面这篇文章主要给大家介绍了关于前端利用vue实现导入和导出功能的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下2024-09-09
本文主要介绍了vue前端RSA加密java后端解密的方法实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-02-02
这篇文章主要给大家介绍了关于vue项目使用js监听浏览器关闭、刷新及后退事件的相关资料,文中通过代码介绍的非常详细,对大家学习或者使用vue具有一定的参考借鉴价值,需要的朋友可以参考下2023-09-09
Vue.js的组件可以理解为预先定义好了行为的ViewModel类。这篇文章主要介绍了Vue.js组件使用开发实例教程的相关资料,需要的朋友可以参考下2016-11-11
在vue项目中使用codemirror插件实现代码编辑器功能
这篇文章主要介绍了在vue项目中使用codemirror插件实现代码编辑器功能（代码高亮显示及自动提示）,本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下2019-08-08
今天小编就为大家分享一篇Vue模拟数据,实现路由进入商品详情页面的示例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-08-08
这篇文章主要介绍了Vue组件之 高德地图地址选择功能的实例代码,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下2019-06-06
最新评论