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

最新推荐文章于 2024-11-06 17:29:08 发布

逻辑峰

最新推荐文章于 2024-11-06 17:29:08 发布

阅读量471

点赞数

分类专栏： VUE 文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/weixin_43684214/article/details/133982730

版权

VUE 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

文章目录

1 父组件写法
2 子组件写法

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>