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-button
          size="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>