vue3中的透传attributes教程示例详解

目录

• 引言
• 绑定样式
• 对象
• 数组
• 透传的attributes
• 透传 attributes 之样式绑定
• 透传 attributes 之事件绑定
• 特殊1：组件嵌套
• 特殊2：禁用透传attributes
• 特殊3：在 javascript 中访问透传的attributes
• 总结

引言

最近两年都是在使用 react 进行项目开发，看技术博客都是针对 react 和 javaScript 高级方面的，对 vue 的知识基本上遗忘的差不多了。最近开始慢慢回顾 vue 的知识以及对新的语法进行学习，为后面的计划做准备（哈哈哈，懂得都懂）。

先从最简单的样式开始吧。

绑定样式

vue 的样式绑定要人性化很多，react 实现 vue 的这种写法，还需要专门下载一个第三方库: classnames。

vue 的样式绑定有两种形式：对象和数组。

相对而言，个人还是比较的偏向对象的写法，可能 react 写习惯了吧。原因有两点：

• 数组能实现的，对象也能使用（反之亦然）。
• 在 DOM 结构中，使用数组的[]形式，感觉看起来比较的怪异，复杂。

对象

我把对象的形式分为三种场景，分别如下：

场景一：循环列表，根据列表项的某属性的不同而展示不同

根据列表项的isActive的属性值不同，来判断是否显示isActive类名。

场景二：通过触发事件，来展示不同的样式。

这种情况一般针对于用户操作，比如点击按钮触发事件，来修改某一内容的样式。