vue学习-非 Prop 的 Attribute

最新推荐文章于 2023-01-31 09:06:41 发布
最新推荐文章于 2023-01-31 09:06:41 发布
阅读量502 收藏
点赞数
分类专栏： vue学习 文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Rulelur/article/details/120983442
版权
本文探讨Vue组件中的非 Prop Attribute，详细解释了Attribute继承的机制，即当组件有一个根节点时，非 prop 的 attribute 会被自动添加到根节点。同时，文章还介绍了如何禁用这种继承行为，通过设置`inheritAttrs: false`，并利用`$attrs`将属性应用到特定节点。对于拥有多个根节点的组件，没有默认的 attribute 贯穿行为。
摘要由CSDN通过智能技术生成

一个非 prop 的 attribute 是指传向一个组件，但是该组件并没有相应 props 或 emits 定义的 attribute。常见的示例包括 class、style 和 id 属性。

1.Attribute 继承

当组件返回单个根节点时，非 prop attribute 将自动添加到根节点的 attribute 中

如下例，父组件data-status就会自动添加到子组件的单个根节点的attribute中

当然，如果子组件将dataStatus加入props，就不会出现在根节点的attribute中了

<!-- 具有非prop attribute的Date-picker组件-->
<date-picker data-status="activated"></date-picker>

<!-- 渲染 date-picker 组件 -->
<div class="date-picker" data-status="activated">
  <input type="datetime-local" />
</div>

同样的规则也适用于事件监听器</

最低0.47元/天 解锁文章
Rulelur
关注
专栏目录
Vue 3 非 Props 的Attribute
人生代码 ---- 公众号
10-22 881
非 Prop 的 Attribute什么是 非 Prop 的 Attribute 呢？就比如我们的 DOM 元素自带的属性 class，style ，id，href 等等。Attribu...
vue中非 prop 的 Attribute处理
ahq2018的博客
03-10 190
项目场景： vue-cli搭建的单页面应用 问题描述 父组件通过prop将数据传递给子组件, 偶然遇到父组件传递了多个数据, 但是子组件只能接受其中一些的情况, 示例代码如下: <template> <div class="father"> 父组件 <son :data01="data01" :data02="data02" /> </div> </template> <script> import son
非Prop的Attribute
李卓书
07-05 880
文章目录为什么会出现？attribute是什么？举例说明 为什么会出现？ 根据官方文档说明： 一个非 prop 的 attribute 是指传向一个组件，但是该组件并没有相应 props 或 emits 定义的 attribute。常见的示例包括 class、style 和 id 属性。 从上面这句话，可以抽离几点要素： 1 常见的class、style、id是可以不通过prop传递的 2 props和emits都是参与其中的两个property attribute是什么？ attribute翻译过来是属性
VUE中非props的attribute
weixin_42943920的博客
12-05 74
1-Attribute 继承 select自带change和showChange事件，无需通过$emit显式发出
非 Prop 的 Attribute
weixin_48728002的博客
01-31 182
非 Prop 的 Attribute 的理解
Vue学习-1-入门
baidu_38126306的博客
11-03 521
Vue 狂神说 1. 概述 Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式JavaScript框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue的核心库只关心视图层View，方便与第三方或既有项目整合； 遵循SoC原则关注点分离原则； HTML + CSS + JS ：视图，给用户看，刷新后台给的数据； 网络通信：Axios； 页面跳转：Vue-router 状态管理：Vuex Vue-UI：ICE，Element U
vue学习-自定义指令
Rulelur的博客
11-05 4016
vue局部指令 使用：元素上加上v-自定义指令名 <template> <input type="text" v-my-focus /> </template> <script> export default { directives: { "my-focus": { mounted(el) { el.focus(); }, }, }, }; </script> 钩.
vue组件的非prop Attribute 继承
qq_40504108的博客
01-07 371
vue组件的 Attribute 继承 <div id="hyy"> <compomenta :label='message' placeholder="test" def="message"></compomenta> </div> Vue.component("compomenta",{ props: ['label'], template:'<input v-bind:value="label" >', }) var test =
Vue--理解非prop特性
weixin_34335458的博客
04-11 976
所谓非 prop 特性，就是指它可以直接传入组件，而不需要定义相应的 prop。 尽管为组件定义明确的 prop 是推荐的传参方式，组件的作者却并不总能预见到组件被使用的场景。所以，组件可以接收任意传入的特性，这些特性都会被添加到组件的根元素上。 例如，假设我们使用了第三方组件bs-date-input，它包含一个 Bootstrap 插件，该插件需要在input上添加data-3d-...
Vue组件_非Prop特性与组件_监听组件事件
ZuoSanLuoZuoWuQueZ的博客
02-02 180
组件_非Prop特性 非Prop特性指的是，一个未被组件注册的特性。当组件接收了一个非Prop特性时，该特性会被添加到这个组件的根元素上。 替换/合并已有的特性 想象一下 <my-cmp> 的模板是这样的： <input type="date" class="b"> 为了给我们的日期选择器插件定制一个主题，我们可能需要像这样添加一个特别的类名： <my-cmp class="my-cmp" ></my-cmp> 在这种情况下，我们定义了两个不同的 cl
Vue3官网-深入组件（六）props（单向数据流、验证）、非 Prop 的 Attribute（禁止继承）、$attrs、自定义事件（在组件上使用 v-model、emits）
qq_43456781的博客
09-18 564
Vue3官网-深入组件（二）props（单向数据流、验证）、非 Prop 的 Attribute（禁止继承）、$attrs、自定义事件（在组件上使用 v-model、emits） 文章目录Vue3官网-深入组件（二）props（单向数据流、验证）、非 Prop 的 Attribute（禁止继承）、$attrs、自定义事件（在组件上使用 v-model、emits）1. PropsProp 类型传递静态或动态的 Prop传入一个数字传入一个布尔值传入一个数组传入一个对象传入一个对象的所有 property单向
Vue2.0文档 关于非props属性与 禁用 Attribute 继承 的困惑记录
qq_42186457的博客
04-28 461
关于非props属性 这是官网原文内容： 一个非 prop 的 attribute 是指传向一个组件，但是该组件并没有相应 prop 定义的 attribute。 因为显式定义的 prop 适用于向一个子组件传入信息，然而组件库的作者并不总能预见组件会被用于怎样的场景。这也是为什么组件可以接受任意的 attribute，而这些 attribute 会被添加到这个组件的根元素上。 原谅我发量尚可，脑瓜不够亮，于是自己写例子尝试： 首先，正常的prop传递应该是这样的：父传子承 <div
【小白读vue官方文档】vue中非props属性、$attrs和禁用 Attribute 继承
weixin_41604040的博客
11-02 2002
vue中非props属性 一个非 prop 的 attribute 是指传向一个组件，但是该组件并没有相应 prop 定义的 attribute。 举个例子： 自定义一个test组件，并接受父组件传来的test1 test2 class style 属性，其中 test1 属性在props里被接收，并在模板中显示用$attrs显示。 关于$attrs,vue的官方文档这么描述： 包含了父作用域中不作为 prop 被识别 (且获取) 的 attribute 绑定 (class和 style除外)。 &
Vue组件中如何获取非Prop特性的值
切糕的技术博客
11-05 2584
Vue组件中如何获取非Prop特性的值
如何理解Vue的非prop属性
weixin_33796205的博客
08-16 403
案例： <div id="app"> <my-comp data-title="learn vue" class="mycls" style="color:red;"></my-comp> </div> <script> Vue.component('my-com...
获取该按钮下的所有的含有data-status的p标签的子元素，然后获取它的值
qq_42236548的博客
02-17 764
/** *点击订单弹出 订单号；若订单状态已支付 不弹出订单号 */ $("#orderList").on("click", "li", function () { // 获取该按钮下的所有的含有data-status的p标签的子元素，然后获取它的值 let exclude = $(this).children("p[data-status]").attr("data-status"); if (exclude !=..
8:21 error `slot-scope` are deprecated vue/no-deprecated-slot-scope-attribute
最新发布
07-15
抱歉，这是因为 Vue 2.6+ 版本中废弃了 `slot-scope`，取而代之的是使用 `v-slot` 来定义插槽内容。以下是一个更新后的示例代码： ```html <div class="category-management"> 分类管理 <el-table :data=...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值