vue将elementui的表格组件封装后如何传值
时间: 2023-12-29 16:03:51 浏览: 123
vue elementui 实现搜索栏公共组件封装的实例代码
如果你封装了一个 ElementUI 的表格组件,那么在组件内部,可以使用 `props` 来接收父组件传递过来的值。下面是一个简单的例子:
```html
<!-- 父组件 -->
<template>
<div>
<my-table :data="tableData"></my-table>
</div>
</template>
<script>
import MyTable from './MyTable.vue';
export default {
components: {
MyTable
},
data() {
return {
tableData: [
{ name: '张三', age: 18 },
{ name: '李四', age: 20 },
{ name: '王五', age: 22 }
]
};
}
};
</script>
```
```html
<!-- MyTable.vue 组件 -->
<template>
<el-table :data="data">
<el-table-column prop="name" label="姓名"></el-table-column>
<el-table-column prop="age" label="年龄"></el-table-column>
</el-table>
</template>
<script>
export default {
props: {
data: {
type: Array,
required: true
}
}
};
</script>
```
在上面的代码中,我们在父组件中传递了一个名为 `tableData` 的数组给 `MyTable` 组件,在 `MyTable` 组件中,我们使用了 `props` 来接收这个数组,并将其绑定到 `el-table` 的 `data` 属性上。这样就可以在 `MyTable` 组件中使用父组件传递过来的数据了。
阅读全文