Vue组件分装之$attrs、$listener传递属性及事件

使用v-bind="$attrs"来将父组件的属性传递给自定义按钮

使用v-on="$listeners"将父组件的事件监听器传递给自定义按钮。

使用$slots获取父组件所有插槽以及作用域插槽对应的参数#[name]="scopeData"

这样,自定义按钮就能够直接响应父组件的事件,而不需要手动触发。

javascript 复制代码
  <Select ref="selectRef" v-bind="$attrs" v-on="$listener">
    <template v-for="(value, name) in $slots" #[name]="scopeData">
      <slot :name="name" v-bind="scopeData || {}"></slot>
    </template>
    <Option v-for="(item, index) in optionDatas" :value="item.value" :key="item.value + index">{{
      item.label
    }}</Option>
  </Select>
相关推荐
m0_6530313614 分钟前
PostgreSQL技术大讲堂 - 第97讲:PG数据库编码和区域(locale)答疑解惑
数据库·postgresql
会编程的林俊杰33 分钟前
MySQL中的锁有哪些
数据库·mysql
cts61834 分钟前
Milvus分布式数据库工作职责
数据库·分布式·milvus
周胡杰34 分钟前
鸿蒙加载预置数据库-关系型数据库-如何读取本地/预制数据库
数据库·华为·harmonyos·鸿蒙
布朗克16838 分钟前
java常见的jvm内存分析工具
java·jvm·数据库
胡八一1 小时前
SQLite / LiteDB 单文件数据库为何“清空表后仍占几 GB”?——原理解析与空间回收实战
jvm·数据库·sqlite
2401_831501732 小时前
Linux之Zabbix分布式监控篇(二)
数据库·分布式·zabbix
秋林辉3 小时前
Jfinal+SQLite处理 sqlite数据库执行FIND_IN_SET报错
jvm·数据库·sqlite
巴里巴气6 小时前
MongoDB复杂查询 聚合框架
数据库·mongodb
scheduleTTe9 小时前
SQL增查
数据库·sql