如何将当前组件的所有属性快速传递给子组件?
今早发现了一个简便方式关于v-bind 特意在此记录一下
举例 :
<el-table ref="tableData" :data="tableData">
<el-table-column
v-for="(item, index) in columnList"
:key="index"
:prop="item.prop"
:label="item.label"
align="center"
show-overflow-tooltip
></el-table-column>
</el-table>
<script>
export default {
data(){
return{
columnList: [
{ label: "姓名", prop: "name" },
{ label: "编号", prop: "id" },
{ label: "年龄", prop: "age" },
{ label: "成绩", prop: "job" },
],
}
}
}
</script>
一般在这里遍历表格数据的时候,需要每个字段都v-bind一下,这时候我们其实可以通过一次性绑定属性
<el-table-column
v-for="(item, index) in columnList"
:key="index"
v-bind="item"
align="center"
show-overflow-tooltip
></el-table-column>
达到的效果是一样的 如果你还觉得 v-bind 不够简洁 也可以直接使用
:="item"
不建议这样写,并不是越简洁越好 这样阅读性较差
有何指点,欢迎提出建议!