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>
相关推荐
梨子同志10 分钟前
Vue 生命周期
前端·vue.js
梨子同志10 分钟前
Vue 组件通信详解
前端·vue.js
拾光拾趣录13 分钟前
深入解析 Vue.nextTick 源码:异步更新机制的核心实现
前端·vue.js
markyankee10115 分钟前
Vue 指令系统:构建动态界面的核心利器
javascript·vue.js
拾光拾趣录16 分钟前
在 Vue 中使用 SVG 图标
前端·vue.js·svg
亲爱的非洲野猪17 分钟前
Oracle与MySQL详细对比
数据库·mysql·oracle
Matrix7020 分钟前
Navicat实现MySQL数据传输与同步完整指南
数据库·mysql
Z字小熊饼干爱吃保安1 小时前
面试技术问题总结一
数据库·面试·职场和发展
极限实验室1 小时前
一键启动:使用 start-local 脚本轻松管理 INFINI Console 与 Easysearch 本地环境
数据库·docker
没有口袋啦1 小时前
《数据库》第一次作业:MySQL数据库账户及授权
数据库·mysql