vue3 禁用 Attribute 继承

最新推荐文章于 2023-07-19 09:00:00 发布
最新推荐文章于 2023-07-19 09:00:00 发布
阅读量764 收藏 1
点赞数
分类专栏： vue 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40890601/article/details/120405004
版权

意外在控制台发现传给子组件的属性以这样的方式呈现 ，感觉有些奇怪，在这里插入图片描述
于是查了官网文档

当组件返回单个根节点时，非 prop attribute 将自动添加到根节点的 attribute 中。如果组件有多个根节点，那么会发出警告
组件上有多个根节点时，不能继承就会发出警告

非 Prop 的 Attribute是组件没有props 和 emits 接收的属性，常见示例包括class、style 和 id 属性， 平时使用组件时总是直接在组件上加 class 或 style 都能修改大概就是这个原因。
在注册组件时，可以通过修改inheritAttrs: false, 来禁用 Attribute 继承

app.component(
  component.name
最低0.47元/天 解锁文章
小k铁柱
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue组件的inheritAttrs属性
weixin_49868928的博客
12-29 831
vue官网对于inheritAttrs的属性解释：如果你不希望组件的根元素继承特性，你可以在组件的选项中设置 inheritAttrs: false。 可能不是很好理解，我们可以举个例子来验证一下。 当inheritAttrs为false时 <div id ="wxApp" class ="appclass"> <blog-post title="标题" demo-one="未定义属性1" demo-tow="未定义属性2" class="cointer2" style=
【Vue前端】props传值，attributes禁止继承
最新发布
LeonNo11的博客
10-21 314
参考：https://www.cnblogs.com/jaycethanks/p/15178294.html。
vue3中的 $attrs 与 Attributes 继承
m0_63907100的博客
03-22 549
vue3中的 $attrs 与 Attributes 继承
Vue学习(十六)——子组件样式无法继承
sophiacan110的博客
12-15 1489
在写侧边栏时，将二级菜单作为一个单文件组件抽离出来之后，发现样式完全不同。说明父组件的样式并没有继承给子组件。有三种解决方案： （1）想办法将父组件的样式继承给子组件 （2）sub-menu的属性发生了改变，所以可以找到ant-design-vue sub-menu组件的样式，将其复制黏贴到子组件中。 但是之前已经在main.js中全局引入了Antd，a-menu-item已经引入了，所以是可以直接用的。现在的问题是a-menu-item已经引入了，但是内部的文字的样式很奇怪。要找到...
搬砖日记：vue3组件class名无法继承
weixin_46221198的博客
12-08 503
虽然vue3并没有要求组件只能有一个外盒子，但是处于规范和为了避免不必要的麻烦，还是按原来的标准规范代码吧~
vue3 devtools 版本6.5.0
05-04
7. **自定义设置**：Vue3 DevTools允许用户根据自己的需求调整设置，例如启用/禁用某些功能，或者选择不同的主题颜色。 在安装过程中，`shell-chrome`文件是Vue3 DevTools扩展程序的核心部分，它包含了所有必要的...
vue3 demo.zip
12-05
Vue3 是一款流行的前端JavaScript框架，由尤雨溪开发并维护，它在Vue2的基础上进行了大量的优化和改进，带来了更高效、更灵活的开发体验。本压缩包"vue3 demo.zip"包含了一些基于Vue3的基础示例项目，帮助开发者更好...
vue3-devtools
05-06
Vue3 DevTools是一款专为Vue.js 3.x版本设计的强大开发者工具，用于在Chrome浏览器中进行前端应用的调试。这款工具极大地简化了Vue组件、状态管理和生命周期的检查过程，使得开发人员可以更直观地理解应用的工作原理...
vue3.js本地引入
06-05
vue3.js
vue3图片预览插件.zip
06-14
vue3 发布之后，开始使用 vue3 + ts 写代码，需要使用图片预览插件，在 npm 找了一圈没有适合的。要么是 v2 的插件，要么是不支持 ts,要么是使用不方便，因此封装一个简单的图片预览插件。 内附使用说明 纯手打，...
Vue3中的透传Attributes / $attrs：简化组件开发的利器
有事儿私信。
07-19 3966
Vue3推出了一系列新功能和改进。使用下来后，其中一个很实用的新特性就是透传 Attributes（透传属性）。本文将介绍 Vue3中的透传 Attributes，并提结合代码示例来展示它在实际项目中的使用。
12.Vue3.x自定义组件上面使用v-mode双休数据绑定 以及 slots以及 Prop 的Attribute 继承 、禁用 Attribute 继承
05-14 825
一、自定义组件使用v-model实现双休数据绑定 v-model主要用于表单的双向数据绑定。现在学习一下v-model实现自定义组件的双向数据绑定。 单个v-model数据绑定 默认情况下，组件上的v-model使用modelValue作为prop和update:modelValue作为事件。我们可以通过向v-model传递参数来修改这些名称： <my-component v-model:foo="bar"></my-component> 在本例中，子组件将需要一个foo p
vue3 `inheritAttrs`属性继承与`$attrs`使用与讲解
从今年开始写写博客~~
02-12 6548
当template有根元素的时候，绑定到组件上的属性和事件会自动继承到根元素上。 当组件返回单个根节点时，非 prop 的 attribute 将自动添加到根节点的 attribute 中。 同样的规则也适用于事件监听器： 如果组件是片段(多节点)，并且组件标签绑定了attr和事件，都不会继承，并且会抛出警告！ 也就是说，片段组件需要将 inheritAttrs 设置为 false。当然不设置为 false 也有个好处，抛出警告告诉编程人员，这个组件是多节点的！你对该组件标签设置的 attr 和 事
vue3+ts深入组件（三）透传Attributes
Asen-coder的博客
11-26 1680
本节内容作为父子组件传参的补充内容透传Attributes ，一般用来在父子组件中传递属性例如，class，style，id…且该值不会被组件当作prop或者emits。透传Attributes,也可以用来传递v-on事件监听器（例外情况下文讲解）如果根元素本来就存在class，将会！！
关于vue.js里禁用特性继承的理解
Liuqz2009的专栏
01-05 457
最近在跟着官方文档学习vue.js的文章，当看到禁用继承特性这一点的时候不是很理解，后跟着官方的实例运行了一下，算是弄懂了一些，特此记录，仅供参考！ 首先假设如今有一个组件<base-input></base-input>,创建改组件式的代码如下： Vue.component("base-input", { inheritAttrs: false, //此处设置禁...
Vue3.x属性继承报错解决
m0_59092234的博客
03-06 1029
编写vue组件的时候莫名报了下面的警告: [Vue warn]: Extraneous non-props attributes (border, style) were passed to component but could not be automatically inherited because component renders fragment or text root nodes. at xxxx(发生问题的组件位置) at ... 解决： 在自定义组件上添加了border、style属性
vue子组件如何不继承父组件style样式
qq_43512769的博客
05-13 4557
vue子组件如何不继承父组件style样式 在引入子组件后，有的子组件的样式会被父组件定义的类所改变，所有我们要解决这个问题。 加上scoped 后 子组件不会被父组件样式改变 <style lang="scss" scoped> </styke> ...
vue3 组件继承 例子
09-07
以下是一个简单的Vue3组件继承的示例： ``` // 父组件 const ParentComponent = { data() { return { message: '我是父组件的消息' } }, template: ` <div> <h2>父组件</h2> <p>{{ message }}</p> </div> ` } // 子组件继承父组件 const ChildComponent = { extends: ParentComponent, data() { return { message: '我是子组件的消息' } }, template: ` <div> <h2>子组件</h2> <p>{{ message }}</p> </div> ` } // 注册子组件并在页面中使用 const app = Vue.createApp({ components: { ChildComponent }, template: ` <div> <child-component></child-component> </div> ` }) app.mount('#app') ``` 在这个例子中，我们定义了一个父组件 `ParentComponent`，它有一个名为 `message` 的数据属性和一个模板，显示 `message` 的值。 然后，我们定义了一个子组件 `ChildComponent`，使用 `extends` 关键字继承了父组件 `ParentComponent`，并覆盖了 `message` 数据属性的值。子组件还有自己的模板，显示子组件自己的 `message` 值。 最后，在应用程序中注册子组件，并在模板中使用它。 当我们运行这个示例时，页面上将显示： ``` 子组件 我是子组件的消息 ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值