vue 透传 Attributes

Attributes 继承

“透传 attribute”指的是传递给一个组件,却没有被该组件声明为 props 或 emits 的 attribute 或者 v-on 事件监听器。最常见的例子就是 classstyle 和 id

当一个组件以单个元素为根作渲染时,透传的 attribute 会自动被添加到根元素上。举例来说,假如我们有一个 <MyButton> 组件,它的模板长这样:

<!-- <MyButton> 的模板 -->
<button>click me</button>

一个父组件使用了这个组件,并且传入了 class

<MyButton class="large" />

最后渲染出的 DOM 结果是:

<button class="large">click me</button>

这里,<MyButton> 并没有将 class 声明为一个它所接受的 prop,所以 class 被视作透传 attribute,自动透传到了 <MyButton> 的根元素上。

对 class 和 style 的合并

如果一个子组件的根元素已经有了 class 或 style attribute,它会和从父组件上继承的值合并。如果我们将之前的 <MyButton> 组件的模板改成这样:

<!-- <MyButton> 的模板 -->
<button class="btn">click me</button>

v-on 监听器继承

同样的规则也适用于 v-on 事件监听器:

<MyButton @click="onClick" />

click 监听器会被添加到 <MyButton> 的根元素,即那个原生的 <button> 元素之上。当原生的 <button> 被点击,会触发父组件的 onClick 方法。同样的,如果原生 button 元素自身也通过 v-on 绑定了一个事件监听器,则这个监听器和从父组件继承的监听器都会被触发。

深层组件继承

有些情况下一个组件会在根节点上渲染另一个组件。例如,我们重构一下 <MyButton>,让它在根节点上渲染 <BaseButton>

<!-- <MyButton/> 的模板,只是渲染另一个组件 -->
<BaseButton />

 

此时 <MyButton> 接收的透传 attribute 会直接继续传给 <BaseButton>

请注意:

  1. 透传的 attribute 不会包含 <MyButton> 上声明过的 props 或是针对 emits 声明事件的 v-on 侦听函数,换句话说,声明过的 props 和侦听函数被 <MyButton>“消费”了。

  2. 透传的 attribute 若符合声明,也可以作为 props 传入 <BaseButton>

相关推荐

  1. vue Attributes

    2024-03-31 09:54:06       17 阅读
  2. vue Attributes(二)

    2024-03-31 09:54:06       12 阅读
  3. Android 上层的View/不 点击事件 到下层

    2024-03-31 09:54:06       11 阅读
  4. vue3 key Attribute 的变化

    2024-03-31 09:54:06       41 阅读

最近更新

  1. TCP协议是安全的吗?

    2024-03-31 09:54:06       18 阅读
  2. 阿里云服务器执行yum,一直下载docker-ce-stable失败

    2024-03-31 09:54:06       19 阅读
  3. 【Python教程】压缩PDF文件大小

    2024-03-31 09:54:06       18 阅读
  4. 通过文章id递归查询所有评论(xml)

    2024-03-31 09:54:06       20 阅读

热门阅读

  1. 40个学习网站合集

    2024-03-31 09:54:06       15 阅读
  2. MySql的下载与安装

    2024-03-31 09:54:06       16 阅读
  3. Zookeeper设计的思想

    2024-03-31 09:54:06       15 阅读
  4. pg_rman在恢复服务器上恢复源库的备份

    2024-03-31 09:54:06       13 阅读
  5. js的Number对象和全局对象

    2024-03-31 09:54:06       14 阅读
  6. Spark SQL 数据源

    2024-03-31 09:54:06       17 阅读
  7. 解决tmux中astronvim颜色显示问题

    2024-03-31 09:54:06       16 阅读
  8. Vue PostCSS的使用介绍

    2024-03-31 09:54:06       14 阅读
  9. Dockerfile最佳实践

    2024-03-31 09:54:06       15 阅读
  10. 前端代码规范

    2024-03-31 09:54:06       16 阅读