vue $attrs和$listeners

最新推荐文章于 2025-09-18 22:00:00 发布

原创最新推荐文章于 2025-09-18 22:00:00 发布 · 512 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

vue2

$attrs: 接收父组件传过来的属性（$props）

 <!-- 接收父组件传过来的属性并传递给子组件 -->
<a-upload
    name="file"
    v-bind="$attrs"
    :file-list="fileList"
  >
  </a-upload>

$listeners: 接收父组件传递过来的方法
$listeners传方法的同时自己添加事件，两个回调都会执行

<!-- 接收父组件传过来的方法并传递给子组件 -->
<Table
   ref="pageTable"
   v-on="listeners"
   @on-row-dblclick="rowdblclick"
 >
 </Table>

$props: 接收父组件传过来并且已经定义的属性

<!-- 接收父组件传过来的属性并传递给子组件，包含已定义和未定义的所有属性 -->
 <Table
     ref="pageTable"
     v-bind="{...$props,...$attrs}"
     v-on="listeners"
     @on-row-dblclick="rowdblclick"
      >
</Table>
<script>
export default {
props: {
    tableTitle: {
      type: Object,
      default: () => ({}),
    },
    columns: {
      type: Array,
      required: true,
    }, // 表头数据
  },
}
</script>