Vue组件分装之$attrs、$listener传递属性及事件

本文介绍: 获取父组件所有插槽以及作用域插槽对应的参数#[name]=”scopeDa t a“这样，自定义按钮就能够直接响应父组件的事件，而不需要手动触发。使用 v–on=”$listen e rs“将父组件的事件监听器传递给自定义按钮。使用 v–bind=”$attr s“来将父组件的属性传递给自定义按钮。

使用v-bind="$attrs"来将父组件的属性传递给自定义按钮

使用v-on="$listeners"将父组件的事件监听器传递给自定义按钮。

使用$slots获取父组件所有插槽以及作用域插槽对应的参数#[name]=”scopeDa t a“

这样，自定义按钮就能够直接响应父组件的事件，而不需要手动触发。

  <Select ref="selectRef" v-bind="$attrs" v-on="$listener"&gt;
    <template v-for="(value, name) in $slots" #[name]="scopeData"&gt;
      <slot :name="name" v-bind="scopeData || {}"&gt;</slot&gt;
    </template&gt;
    <Option v-for="(item, index) in optionDatas" :value="item.value" :key="item.value + index"&gt;{{
      item.label
    }}</Option&gt;
  </Select&gt;