使用场景
我们会遇到这样的场景，比如对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但是可以正常接收属性
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/180800.html原文链接：https://javaforall.net
