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>
相关推荐
专业软件系统开发27 分钟前
药品说明书查询系统源码 本地数据库 PHP版本
数据库·查询系统源码·说明书查询源码
毕业设计制作和分享31 分钟前
springboot150基于springboot的贸易行业crm系统
java·vue.js·spring boot·后端·毕业设计·mybatis
冉冰学姐4 小时前
SSM足球爱好者服务平台i387z(程序+源码+数据库+调试部署+开发环境)带论文文档1万字以上,文末可获取,系统界面在最后面。
数据库·ssm 框架·足球爱好者服务平台
大飞记Python4 小时前
部门管理|“编辑部门”功能实现(Django5零基础Web平台)
前端·数据库·python·django
清风6666666 小时前
基于单片机的智能收银机模拟系统设计
数据库·单片机·毕业设计·nosql·课程设计
资深低代码开发平台专家6 小时前
PostgreSQL 18 发布
数据库·postgresql
与衫7 小时前
在 VS Code 里看清你的数据流向:Gudu SQL Omni 实测体验
数据库·sql
前端开发爱好者7 小时前
尤雨溪官宣:"新玩具" 比 Prettier 快 45 倍!
前端·javascript·vue.js
欧阳呀7 小时前
Vue+element ui导入组件封装——超级优雅版
前端·javascript·vue.js·elementui