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

文章目录

  • [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>
相关推荐
paopaokaka_luck1 分钟前
基于Spring Boot+Vue的吉他社团系统设计和实现(协同过滤算法)
java·vue.js·spring boot·后端·spring
伍哥的传说2 小时前
Radash.js 现代化JavaScript实用工具库详解 – 轻量级Lodash替代方案
开发语言·javascript·ecmascript·tree-shaking·radash.js·debounce·throttle
程序视点3 小时前
IObit Uninstaller Pro专业卸载,免激活版本,卸载清理注册表,彻底告别软件残留
前端·windows·后端
前端程序媛-Tian3 小时前
【dropdown组件填坑指南】—怎么实现下拉框的位置计算
前端·javascript·vue
iamlujingtao3 小时前
js多边形算法:获取多边形中心点,且必定在多边形内部
javascript·算法
嘉琪0013 小时前
实现视频实时马赛克
linux·前端·javascript
烛阴3 小时前
Smoothstep
前端·webgl
若梦plus4 小时前
Eslint中微内核&插件化思想的应用
前端·eslint
爱分享的程序员4 小时前
前端面试专栏-前沿技术:30.跨端开发技术(React Native、Flutter)
前端·javascript·面试
超级土豆粉4 小时前
Taro 位置相关 API 介绍
前端·javascript·react.js·taro