vue2，props属性和attribute属性的区别和不同

于 2023-10-10 11:28:34 发布
阅读量140 收藏
点赞数
文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Frank_colo/article/details/133743162
版权

Prop — Vue.js

在父组件中对子组件标签上手写绑定动态属性，这个属性就是props属性。不是写在子组件上的属性就不是props属性。

写在组件上的属性就是props属性

烟火的降落
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue3: 透传的说明 + Props和 Attrs的区别
EvanYYY1的博客
05-31 1569
Vue3 透传和porps的区别
Vue——透传 Attributes
hulin的博客
04-15 784
Vue的透传 Attributes
attr和prop
weixin_43269800的博客
02-11 69
attr就是attribute属性 html的自定义和预定义属性，我们统称为attribute； prop就是property属性 js原生对象的直接属性，我们叫做property； 什么是布尔值属性，什么是非布尔值属性 property值为布尔值类型的我们统称为布尔值属性； property值为非布尔值类型的我们统称为非布尔值属性； attribute和property的同步关系 1、非布尔值属...
【小白读vue官方文档】vue中非props属性、$attrs和禁用 Attribute 继承
weixin_41604040的博客
11-02 1955
vue中非props属性 一个非 prop 的 attribute 是指传向一个组件，但是该组件并没有相应 prop 定义的 attribute。 举个例子： 自定义一个test组件，并接受父组件传来的test1 test2 class style 属性，其中 test1 属性在props里被接收，并在模板中显示用$attrs显示。 关于$attrs,vue的官方文档这么描述： 包含了父作用域中不作为 prop 被识别 (且获取) 的 attribute 绑定 (class和 style除外)。 &
vue props和attrs
冰雪为融的博客
05-10 882
vue3 props 要先声明才能取值，attrs不用声明直接使用（$attrs 包含 class and style attribute）props 不包含事件，attrs包含 props 支持 String 以外的类型，attrs只有 String 类型 props 没有声明的属性，会在 attrs 里，若在 props 内声明了该属性，那么 attrs 里就不会出现该属性 vue2与vue3的不同 包含所有父作用域的绑定 (class 和 style 除外) props 不包含事件，attrs
Vue 使用Props属性实现父子组件的动态传值详解
10-16
本篇文章将详细介绍如何使用Vue的Props属性来实现父子组件间的动态传值。 Props，全称Properties，是Vue中用于父组件向子组件传递数据的一种机制。这种方式使得子组件可以接收来自父组件的数据，并根据这些数据进行...
详解如何在Vue2中实现组件props双向绑定
12-04
在Vue2中组件的props的数据流动改为了只能单向流动，即只能由组件外（调用组件方）通过组件的DOM属性attribute传递props给组件内，组件内只能被动接收组件外传递过来的数据，并且在组件内，不能修改由外层传
详解Vue3 Composition API中的提取和重用逻辑
10-15
首先，Vue2.x 的 Options API 将数据、方法和计算属性分散在不同的部分，导致一个组件的功能代码可能跨越多个区域，这在代码维护和调试时会带来困难。Vue3 引入的Composition API 提倡在一个 `setup` 函数中处理所有...
2023最新vue面试题.docx
03-26
2. computed 属性和 methods 属性的区别是：computed 属性返回的是计算属性的值，methods 属性返回的是一个函数；computed 属性具有缓存性质，methods 属性没有缓存性质；computed 属性只有在其依赖的数据发生变化时...
前端面试题vue，css.,javascript
最新发布
02-02
- **类选择器、属性选择器、伪类选择器:** 如 `.className`, `[attribute=value]`, `:hover`。 - **元素选择器、伪元素选择器:** 如 `div`, `::before`。 - **通配符 (*):** 最低优先级。 **4. H5 新特性：** -...
Vue之数据对象
玉案轩窗的博客
07-20 3577
前言 本篇文章旨在学习Vue对于相关属性或特性的处理，同时学习HTML特性和DOM属性的区别和联系，实际上涉及到以下内容： HTML特性和DOM属性之间的联系与区别 Vue的数据对象中涉及的HTML特性、DOM属性、组件prop、特殊特性 Vue中对于4种属性或特性处理所涉及的相关逻辑 HTML特性和DOM属性 实际上对于HTML特性和DOM属性，之前对于其的理解是相同的东西，实际上它们是不同...
vue知识点二
weixin_43725034的博客
10-24 147
1
初学Vue（全家桶）-第n天（vue2）：关于v-bind=“$attrs“、v-bind=“$props“ 和v-on=“$listeners“的使用
lalala_dxf的博客
02-12 5793
可以将父组件的所有props下发给它的子组件,子组件需要在其props:{} 中定义要接受的props。: 将调用组件时的组件标签上绑定的的属性(class和style除外)向下传递。在(避免父作用域的不被认作props的特性绑定应用在子组件的根元素上)。：通过，将底层级的信息往高层级传递。
vue2父子组件传参方式汇总
wzy_PROTEIN的博客
05-31 2255
父子通信：父传子：通过props的方式来传递数据子传父：通过自定义的事件来进行触发传递将这种参数传递的方式称为 自定义事件的方式通信。而且也是目前工作中用的最多的。mychange就是你们自己定义的事件名字。这个事件名字不要跟系统名字一样，比如：click、change、focus等等子组件代码eg：（子组件触发自定义事件，触发自定义对应事件函数就会立即执行）$emit是vue提供给我们的一个api，可以触发自定义事件优点：子组件通过api触发事件就可以传递参数，无需自己调用函数。
vue3 项目模板 element-plus 组件动态传入attributes,event
qq_42937179的博客
04-15 2430
vue3 项目模板 组件动态传参(attributes,event)
Vue 中 props 和 attrs 概念与区别
csdn_girl的博客
08-04 4781
Vue 中的区别： Vue中的attrs和attrs和attrs和listener Vue-- attrs与attrs与attrs与listeners的详解 在 vue 中，对于在父组件中传递的属性， 若在子组件中使用@Prop声明了属性如@Prop name，则 name 属性只会在 this.props中出现，不会出现在this.props 中出现，不会出现在 this.props中出现，不会出现在this.attrs 中； 若在子组件中没有使用@Prop声明属性，则属性会默认在 this.attrs中
attribute和property，attr()和prop()的区别
卜小娴的博客
11-06 4303
jQuery中attr( )和prop( )都可以用来设置或者读取某元素的属性值，但是他们之间也有很大区别，prop( )是针对Dom元素属性，attr( )针对HTML元素属性，首先我们看下他们源代码，这样更有利于我们理解他们的应用场景。
Jquery中attr()和props()的区别
一个前端小白的瞎扯
07-07 2111
针对属性对象不同prop( )是针对Dom元素属性，attr( )针对HTML元素属性，和attribute与property区别一样。用于设置的属性值类型不同attr()函数操作的是文档节点的属性，因此设置的属性值只能是字符串类型，如果不是字符串类型，也会调用其toString()方法，将其转为字符串类型。prop()函数操作的是JS对象的属性，因此设置的属性值可以为包括数组和对象在内的任意类型...
vue给树形结构加属性
07-13
要给Vue中的树形结构添加属性，可以使用Vue的自定义指令或计算属性来实现。 1. 使用自定义指令： 在Vue的指令中，可以通过`bind`和`update`钩子函数来操作DOM元素，并为其添加属性。下面是一个给树形结构添加属性的自定义指令示例： ```javascript Vue.directive('tree-attribute', { bind: function (el, binding) { // 获取传入的属性值 const attributeValue = binding.value; // 设置树节点的属性 el.setAttribute('data-tree-attribute', attributeValue); }, update: function (el, binding) { // 更新属性值 const newAttributeValue = binding.value; el.setAttribute('data-tree-attribute', newAttributeValue); } }); ``` 在Vue模板中，使用自定义指令来给树节点添加属性： ```html <div v-tree-attribute="yourAttribute"></div> ``` 2. 使用计算属性： 如果树形结构的数据是响应式的，你可以使用计算属性来为节点添加属性。在计算属性中，根据节点的数据来动态生成属性值，并在模板中使用。 ```javascript Vue.component('tree-node', { props: ['node'], computed: { nodeAttribute: function () { // 根据节点的数据生成属性值 const attributeValue = this.node.attribute; return attributeValue; } }, template: ` <div :data-tree-attribute="nodeAttribute"> <!-- 树节点内容 --> </div> ` }); ``` 在父组件中使用树节点组件，并传入节点数据： ```html <tree-node :node="yourNodeData"></tree-node> ``` 这样，在渲染时，计算属性会根据节点数据动态生成属性值，并将其应用到树节点的属性中。 这些方法可以根据你的具体需求来添加属性到树形结构中的节点。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值