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

1 父组件写法

• 父组件参数和方法

data() {
    return {
      // 遮罩层
      loading: true,
      // 表格数据
      yfeList: []
      	}
     }
1
2
3
4
5
6
7
8

• 导入组件

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

• 组件

components: {yfTabTable},
1

• 传值使用

<yfTabTable :loading="loading"
            :yfList="yfList"
            :handleUpdate="handleUpdate"/>
1
2
3

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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33