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>
相关推荐
德育处主任Pro17 分钟前
「py数据分析」04如何将 Python 爬取的数据保存为 CSV 文件
数据库·python·数据分析
许白掰36 分钟前
Linux入门篇学习——Linux 编写第一个自己的命令
linux·运维·数据库·嵌入式硬件·学习
打不了嗝 ᥬ᭄42 分钟前
文件系统----底层架构
linux·运维·数据库
江城开朗的豌豆1 小时前
Vuex数据突然消失?六招教你轻松找回来!
前端·javascript·vue.js
江城开朗的豌豆1 小时前
Vue状态管理进阶:数据到底是怎么"跑"的?
前端·javascript·vue.js
架构个驾驾1 小时前
从0到1搭建Vue3+Vant移动端项目(一)
前端·javascript·vue.js
梨子同志2 小时前
Vue 生命周期
前端·vue.js
梨子同志2 小时前
Vue 组件通信详解
前端·vue.js
拾光拾趣录2 小时前
深入解析 Vue.nextTick 源码:异步更新机制的核心实现
前端·vue.js
markyankee1012 小时前
Vue 指令系统:构建动态界面的核心利器
javascript·vue.js