vue组件通讯之$attrs

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接： https://blog.csdn.net/weixin_35958891/article/details/102685825

使用场景

我们会遇到这样的场景，比如对element-ui的el-table组件进行二次开发，但是el-table组件有很多属性比如控制高度的height，传入数据的data还有border、size、fit等一个个的去传显然不大现实，这个使用用$attrs处理起来就会特别优雅。

举例

子组件：自定义组件对el-table进行封装，用$attrs接收父组件传过来的属性

<template>
  <el-table v-bind="$attrs">
    <slot />
  </el-table>
</template>

<script>
export default {
  name: "test",
  data() {
    return {};
  }
};
</script>

父组件：

<template>
  <div>
    <e-test :data="tableData" border>
      <el-table-column label="名字" prop="name"></el-table-column>
      <el-table-column label="年龄" prop="age"></el-table-column>
    </e-test>
  </div>
</template>

<script>
import eTest from "./a.vue";
export default {
  name: "Menu2",
  components: { eTest },
  data() {
    return {
      tableData: [{ name: "tom1", age: 22 }, { name: "tom2", age: 33 }]
    };
  }
};
</script>

效果

子组件中没有写props但是可以正常接收属性