vue $attrs和$listeners

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>

vue3

vue3把$attrs和$listeners统一合并到$attrs中,其他和vue一样