vue中的自定义属性并获得属性的值方式

目录
  • 自定义属性并获得属性的值
    • 例如
  • 对自定义属性--props的理解
    • 初始props
    • 问题的出现
    • 为什么会发生双向流动的问题？
    • 补充问题

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

例如

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，进行了代码修改。而且也出现了数据异步的问题（已经解决在后面的文章）。

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

赞 (0)

相关推荐

  • vue2.0获取自定义属性的值

    最近在项目中使用了vue.js.在爬坑的路上遇到了很多问题.这里都会给记录下来,今天要说的是怎么获取自定义属性的值. HTML <!DOCTYPE html> <html> <head> <script src="http://vuejs.org/js/vue.js"></script> <meta charset="utf-8"> <title>JS Bin</title&g

  • 在Vue中获取自定义属性方法:data-id的实例

    获取自定义属性的方法: 第一步:首先在标签上绑定上@click="getDateId(item.id)",并将属性值传到绑定的事件里面 第二步:在标签上继续绑定:date-id = "item.id"属性 第三步:在<script>里面的属性methods里面添写上事件函数 getDateId(id){} 在事件函数里面获取id的值即可 <template> <h2 class="left t-title" @cli

  • vue如何获取自定义元素属性参数值的方法

    vue如何获取自定义元素属性参数值的方法

    偶尔还是会陷入到DOM操作上面去,其实你应该关心的是数据传递,而不是操作DOM.如果你是想获取data-num的数据,可以这样写: <span @click="getData($event,'21')">55</span> getData:function (e,num) { console.log(num) } 这样就可以取到这个值了,如果你是确实想操作DOM,那你可以这样写: <span data-num="21" ref=&quo

  • Vue自定义属性实例分析

    本文实例讲述了Vue自定义属性.分享给大家供大家参考,具体如下: 1 事件名 跟组件和 prop 不同,事件名不存在任何自动化的大小写转换.而是触发的事件名需要完全匹配监听这个事件所用的名称.举个例子,如果触发一个 camelCase 名字的事件: this.$emit('myEvent') 则监听这个名字的 kebab-case 版本是不会有任何效果的: <my-component v-on:my-event="doSomething"></my-component

  • vue.js 获取当前自定义属性值

    假设有一个标签h5, 我们给它添加了一个自定义属性值,(item.id是从动态添加的) 点击h5 标签,如何才能获取当前对应的自定义属性值呢? 想当然的我最开始这样写: <h5 class="left t-title" @click='getDataId' :data-id="item.id"></h5> <script> methods: { getDataId() { console.log(this.data-id); }

  • Vue 自定义标签的src属性不能使用相对路径的解决

    场景 吾辈在使用 Vuetify 时突然遇到的,明明 img 标签就可以使用相对路径获取到图片,而 Veutify 的组件 v-img 却不能使用. 如下面 3 种加载图片的方式 <!-- 正常加载 --> <v-img :src="require('../../assets/logo.png')" /> <!-- 无法加载 --> <v-img src="../../assets/logo.png" /> <!

  • vue中的自定义属性并获得属性的值方式

    vue中的自定义属性并获得属性的值方式

    目录 自定义属性并获得属性的值 例如 对自定义属性--props的理解 初始props 问题的出现 为什么会发生双向流动的问题? 补充问题 自定义属性并获得属性的值 例如 data-radius语法: data-属性 vue: <div @mouseover='changeRadius($event)' @mouseout='changeRadius(false)' @click='setlocation($event)'>           <div data-radius='100

  • Vue中使用方法、计算属性或观察者的方法实例详解

    熟悉 Vue 的都知道 方法methods.计算属性computed.观察者watcher 在 Vue 中有着非常重要的作用,有些时候我们实现一个功能的时候可以使用它们中任何一个都是可以的,但是它们之间又存在一些不同之处,每一个都有一些适合自己的场景,我们要想知道合适的场景,肯定先对它们有一个清楚的了解,先看一个小例子. <div id="app"> <input v-model="firstName" type="text"&

  • Vue中的v-for循环key属性注意事项小结

    当Vue用 v-for 正在更新已渲染过的元素列表是,它默认用"就地复用"策略.如果数据项的顺序被改变,Vue将不是移动DOM元素来匹配数据项的改变,而是简单复用此处每个元素,并且确保它在特定索引下显示已被渲染过的每个元素. 为了给Vue一个提示,以便它能跟踪每个节点的身份,从而重用和重新排序现有元素,你需要为每项提供一个唯一 key 属性.key属性的类型只能为 string或者number类型. 在下面这个例子中,如果不给 p 元素绑定key,我先选中第一个, 然后输入ID和Nam

  • vue中v-for循环给标签属性赋值的方法

    1.给每个按钮添加class的属性值以及icon图标属性值,通过v-for实现自动添加样式,发现属性值无法显示,切记在属性前加上v-bind <html> <head> <meta charset="utf-8"> <title>v-for在线测试实例</title> <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"> &

  • vue中动态参数与计算属性的使用方法

    vue中动态参数与计算属性的使用方法

    一,动态参数 从 2.6.0 开始,可以用方括号括起来的 JavaScript 表达式作为一个指令的参数: <a v-bind:[attributeName]="url"> - 这里的 attributeName 会被作为一个 JavaScript 表达式进行动态求值,求得的值将会作为最终的参数来使用.例如,如果你的 Vue 实例有一个 data property attributeName,其值为 "href",那么这个绑定将等价于 v-bind:hr

  • Vue中的 watch监听属性详情

    Vue中的 watch监听属性详情

    目录 一.watch监听一般数据的变化(数值,字符串,布尔值) 1.数值 2.字符串 3.布尔值 二.watch 监听 复杂类型数据的变化 1.对象 2.数组 3.对象数组 4.对象数组的属性 首先要确认 watch是一个对象,要当成对象来使用. 键:就是那个,你要监听的那个家伙: 值:可以是函数,当你监控的家伙发生变化时,需要执行的函数,这个函数有两个形参 第一个是当前值(新的值),第二个是更新前的值(旧值) 值也可以是函数名:不过这个函数名要用单引号来包裹. 值是包括选项的对象:选项包括有三

  • Vue中的 ref,props,mixin属性

    Vue中的 ref,props,mixin属性

    目录 ref props $attrs mixin ref ref 属性: 1.被用来给元素或子组件注册引用信息((id的替代者) 2.应用在html标签上获取的是真实DOM元素,应用在组件标签上是组件实例对象(vc) 3.使用方式: 打标识: <h1 ref="xxx">....</h1>或<School ref="xxx"></School> 获取: this.$refs.xxx 为了说明这个属性,我们重新写下相关

  • Vue 中可以定义组件模版的几种方式

    前端组件化开发已经是一个老生常谈的话题了,组件化让我们的开发效率以及维护成本带来了质的提升. 当然因为现在的系统越来越复杂庞大,所以开发与维护成本就变得必须要考虑的问题,因此滋生出了目前的三大前端框架 Vue.Angular.React. 那今天我们就来看看 Vue 中有哪些定义组件模版的方式以及他们之间的一些差别. 字符串形式 Vue 最简单直接的一种定义组件模版的方式,但是方式写起来很不友好,就像我们以前拼接 HTML 元素是一样的,很痛苦,所以我们并不常用 Vue.component("m

  • 基于vue中对鼠标划过事件的处理方式详解

    鼠标事件进行监听 需求中,在一个table(组件)表中,对于其中一列(该列为图片列),当鼠标划过该列的某个单元格子(图片)时,需要展示出该单元格子对应的遮罩层 翻阅了一些博客,发现好多都提到了mouse事件,如mouseover.mouseout.mouseenter.mouseleave,在之后我自己也通过这种方法进行了尝试. <template> <el-table :data="tableData" stripe style="width: 100%&

随机推荐