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

逻辑峰2023-10-24 22:12

文章目录

[1 父组件写法](#1 父组件写法)
[2 子组件写法](#2 子组件写法)

1 父组件写法

父组件参数和方法

javascript 复制代码

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

导入组件

javascript 复制代码

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

组件

javascript 复制代码

components: {yfTabTable},

传值使用

javascript 复制代码

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

2 子组件写法

javascript 复制代码

<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>