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>
相关推荐
灰海1 小时前
vue中通过heatmap.js实现热力图(多个热力点)热区展示(带鼠标移入弹窗)
前端·javascript·vue.js·heatmap·heatmapjs
小蒜学长2 小时前
基于springboot 校园餐厅预约点餐微信小程序的设计与实现(代码+数据库+LW)
数据库·spring boot·微信小程序
kimble_xia@oracle2 小时前
Oracle打补丁笔记
数据库·oracle
鼠鼠我捏,要死了捏2 小时前
大规模系统中的分库分表原理深度解析与性能优化实践指南
数据库·性能优化·分库分表
码上暴富3 小时前
vue2迁移到vite[保姆级教程]
前端·javascript·vue.js
Linux运维技术栈3 小时前
【实战+原理】微软云 Azure Database 私有网络接入模式全解析:从子网委派到Private Endpoint
数据库·microsoft·azure
小熊h3 小时前
MySQL集群高可用架构——组复制 (MGR)
linux·数据库·mysql
老华带你飞3 小时前
考研论坛平台|考研论坛小程序系统|基于java和微信小程序的考研论坛平台小程序设计与实现(源码+数据库+文档)
java·vue.js·spring boot·考研·小程序·毕设·考研论坛平台小程序
YAY_tyy4 小时前
基于 Vue3 + VueOffice 的多格式文档预览组件实现(支持 PDF/Word/Excel/PPT)
前端·javascript·vue.js·pdf·word·excel
sunshine-sm4 小时前
CentOS Steam 9安装 MySQL 8
linux·运维·服务器·数据库·mysql·centos·centos stream