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>
相关推荐
江城开朗的豌豆几秒前
Vuex中mutations和actions的那些事儿:为啥非要分家?
前端·javascript·vue.js
Endeavour_T7 分钟前
ECharts图表怎么做自适应?
前端·echarts
bo521008 分钟前
浏览器缓存优先级
前端·面试·浏览器
WTSolutions8 分钟前
Image Pixel RGBA Extractor:免费在线图像像素色彩提取工具全解析
javascript
namehu8 分钟前
浏览器中的扫码枪:从需求到踩坑再到优雅解决
前端·react.js
opbr10 分钟前
🚫🔨 不用重构!教你用 Vue3 + TSX 🧹优雅收纳后台页面一堆操作按钮
前端·vue.js
轻语呢喃14 分钟前
Cookie详解:从原理到实战,彻底搞懂用户身份识别机制
javascript·http·html
G等你下课15 分钟前
使用 Cookie 实现登录登出功能案例
前端·后端
旺旺大力包16 分钟前
【JS笔记】JS 和 noodjs 的常见操作(十)
开发语言·javascript·node.js·ecmascript
西瓜树枝20 分钟前
antd vue全局自定义样式前缀实践
前端·vue.js