vue中，封装组件demo

vue中，封装组件demo

1、组件封装

src\components\common\demo.vue

<template>
<div>
  <el-table :data="tableData">
   <el-table-column  fixed label="序号" type="index" width="50"></el-table-column>
    <el-table-column label="类别名称"  prop="infoTypeName" min-width="92" show-overflow-tooltip></el-table-column>
  </el-table>
</div>
</template>

<script>
	export default {
 name: 'pinyin',
  props: ['tableData'],
  data(){
    return{ }
  },
	}
</script>

<style scoped>

</style>

2、页面引用

index.vue

<template>
    <dataListTable
       :tableData="tableData"
     ></dataListTable>
</template>

<script>
    import dataListTable from "@/components/common/demo.vue";
    export default {
        name: "index",
        components: {dataListTable},  
        data(){
            return{
                tableData:[
                    {infoTypeName:'名称'},
                    {infoTypeName:'名称2'},
                ],
            }
        }
    }    
</script>

<style lang="less" scoped>
</style>