VUE父组件向子组件传递数据和方法

1 父组件写法

• 父组件参数和方法

data() {return {// 遮罩层loading: true,// 表格数据yfeList: []}}

• 导入组件

import yfTable from "@/views/yf/yfTable.vue";

• 组件

components: {yfTabTable},

• 传值使用

<yfTabTable :loading="loading":yfList="yfList":handleUpdate="handleUpdate"/>

2 子组件写法

<template><el-table v-loading="loading" :data="yfList" ><el-table-column label="操作" align="center" class-name="small-padding fixed-width"><template slot-scope="scope"><el-buttonsize="mini"type="text"icon="el-icon-edit"@click="handleUpdate(scope.row)">修改</el-button></template></el-table-column></el-table>
</template><script>
export default {props:{// 遮罩层loading: true,// 管理表格数据（注意添加type，否则会报警告）yfList: {type: Array,default: []},// 更新handleUpdate: {type: Function,default: null}}
}
</script>