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>
相关推荐
ConardLi16 分钟前
MCP + 数据库,一种比 RAG 检索效果更好的新方式!
javascript·数据库·人工智能
纪元A梦21 分钟前
Redis最佳实践——用户会话管理详解
数据库·redis·缓存
多云的夏天27 分钟前
麒麟-QT-ODBC-达梦
linux·数据库·麒麟
京东云开发者31 分钟前
ClickHouse 的“独孤九剑”:极速查询的终极秘籍
数据库
码熔burning42 分钟前
Redis 线程模型:单线程也能快如闪电?
数据库·redis·缓存
勘察加熊人1 小时前
vue猜词游戏
前端·vue.js·游戏
我是哈哈hh1 小时前
【Vue】 核心特性实战解析:computed、watch、条件渲染与列表渲染
前端·javascript·vue.js·前端框架·vue·语法基础
不断前进的皮卡丘2 小时前
06-公寓租赁项目-后台管理-公寓管理篇
java·开发语言·数据库·spring boot
yngsqq2 小时前
批量改CAD图层颜色——CAD c#二次开发
开发语言·数据库·c#