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>
相关推荐
我叫汪枫2 小时前
前端物理引擎库推荐 - 让你的网页动起来!
前端
百思可瑞教育3 小时前
uni-app 根据用户不同身份显示不同的tabBar
vue.js·uni-app·北京百思可瑞教育·北京百思教育
雾恋7 小时前
最近一年的感悟
前端·javascript·程序员
华仔啊7 小时前
Vue3 的 ref 和 reactive 到底用哪个?90% 的开发者都选错了
javascript·vue.js
A黄俊辉A7 小时前
axios+ts封装
开发语言·前端·javascript
小李小李不讲道理8 小时前
「Ant Design 组件库探索」四:Input组件
前端·javascript·react.js
连合机器人8 小时前
晨曦中的守望者:当科技为景区赋予温度
java·前端·科技
郑板桥308 小时前
tua-body-scroll-lock踩坑记录
前端·javascript
IT古董9 小时前
Vue + Vite + Element UI 实现动态主题切换:基于 :root + SCSS 变量的最佳实践
vue.js·ui·scss
解道Jdon9 小时前
SpringBoot4与Spring7发布:云原生深度进化
javascript·reactjs