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>
相关推荐
stoneship17 分钟前
Web项目减少资源加载失败白屏问题
前端
DaMu1 小时前
Cesium & Three.js 【移动端手游“户外大逃杀”】 还在“画页面的”前端开发小伙伴们,是时候该“在往前走一走”了!我们必须摆脱“画页面的”标签!
前端·gis
非专业程序员1 小时前
一文读懂Font文件
前端
Asort1 小时前
JavaScript 从零开始(七):函数编程入门——从定义到可重用代码的完整指南
前端·javascript
Johnny_FEer1 小时前
什么是 React 中的远程组件?
前端·react.js
真夜1 小时前
关于rngh手势与Slider组件手势与事件冲突解决问题记录
android·javascript·app
我是日安1 小时前
从零到一打造 Vue3 响应式系统 Day 10 - 为何 Effect 会被指数级触发?
前端·vue.js
知了一笑1 小时前
「AI」网站模版,效果如何?
前端·后端·产品
艾小码1 小时前
用了这么久React,你真的搞懂useEffect了吗?
前端·javascript·react.js