子组件.vue

<template>
  <div>
    <el-table :data="comSchemaData" highlight-current-row height="517" @row-click="quoteProps">
      <el-table-column label="schema名称" prop="name">
      </el-table-column>
    </el-table>
  </div>
</template>

子组件.ts

quoteProps(row) {
    this.$emit('toProps',row)
  }

父组件.vue

<com-schemas @toProps="toProps"></com-schemas>

注意:html中的toProps不带子组件传进来的参数,否则会报错,在ts中toProps的形参直接使用子组件传入参数即可

父组件.ts


import comProps from './comProps.vue';

@Component({
  components: {
    'com-props': comProps
  },
)
export default class ExpandTable extends Vue {
toProps(row){
    console.log(row);
  }}

子组件通过$emit触发父组件的事件时,参数的传递的更多相关文章

  1. 子组件通过 $emit 触发父组件的自定义事件

    子组件: <template> <div class="train-city"> <h3>父组件传给子组件的toCity:{{sendData} ...

  2. Vue 子组件无法使用 $emit 向父组件传参

    问题描述:

  3. VUE 子组件向父组件传值 , 并且触发父组件方法(函数)

    目标:封装一个  搜索组件 <子组件需要传一个或者多个搜索参数到父组件,然后父组件执行列表查询函数> 1.子组件 <div> <input v-model="l ...

  4. angular中子组件通过@Output 触发父组件的方 法

    1. 子组件引入 Output 和 EventEmitter import { Component, OnInit ,Input,Output,EventEmitter} from '@angular ...

  5. 042——VUE中组件之子组件使用$on与$emit事件触发父组件实现购物车功能

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. vue父组件传值和子组件触发父组件方法

    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script> <scr ...

  7. vue 父组件使用keep-alive和infinite-scroll导致在子组件触发父组件的infinite-scroll方法

    (vue.js)vue 父组件使用keep-alive和infinite-scroll导致在子组件触发父组件的infinite-scroll方法”问题疑问,本网通过在网上对“ (vue.js)vue ...

  8. 基于vue,通过父组件触发子组件的请求,等请求完毕以后,显示子组件,同时隐藏父组件

    正常情况下,子组件应该尽量减少业务逻辑,而应该将业务逻辑放到父组件里面,从而减少耦合,但是当 我们不得不用到这种情况时,可以采用下面的思路 解决方案 尽量将请求单独作为一个函数(不要将请求放到show ...

  9. vue中子组件触发父组件的方法

    网上找了几种方法,下面这两种最实用,最明了 方法一:父组件方法返回是字符串或数组时用这种方法 子组件: <template> <button @click="submit& ...

随机推荐

  1. BZOJ2659: [Beijing wc2012]算不出的算式(数学)

    Time Limit: 3 Sec  Memory Limit: 128 MBSubmit: 1575  Solved: 939[Submit][Status][Discuss] Descriptio ...

  2. 转:前端安全之XSS攻击

    前端安全 原文链接:https://www.freebuf.com/articles/web/185654.html 随着互联网的高速发展,信息安全问题已经成为企业最为关注的焦点之一,而前端又是引发企 ...

  3. springmvc的类型转换器converter

    这个convter类型转换是器做什么用的? 他是做类型转换的,或者数据格式化处理.可以把数据在送到controller之前做处理.变成你想要的格式或者类型.方便我们更好的使用. 比如说你从前台传过来一 ...

  4. git的初始配置(简易的命令行)

    Git 全局设置: git config --global user.name "You name" git config --global user.email "Yo ...

  5. 消费滚动滴log日志文件(flume监听,kafka消费,zookeeper协同)

    第一步:数据源 手写程序实现自动生成如下格式的日志文件: 15837312345,13737312345,2017-01-09 08:09:10,0360 打包放到服务器,使用如下命令执行,模拟持续不 ...

  6. python3 练习题100例 (二十三)与7相关的数

    与7相关的数:如果一个正整数,它能被7整除或者它的十进制表示法中某个位数上的数字为7,则称之为与7相关的数.(10分) 题目内容: 现在我们给定一个正整数n(n<1000),求所有小于等于n的与 ...

  7. C# 设置程序最小化到任务栏右下角,鼠标左键单击还原,右键提示关闭程序

    首先设置程序最小化到任务栏右下角 先给窗口添加一个notifyIcon控件 为notifyIcon控件设置ICO图标(不设置图标将无法在任务栏显示) 给notifyIcon控件添加点击事件 然后是最小 ...

  8. (数据科学学习手札24)逻辑回归分类器原理详解&Python与R实现

    一.简介 逻辑回归(Logistic Regression),与它的名字恰恰相反,它是一个分类器而非回归方法,在一些文献里它也被称为logit回归.最大熵分类器(MaxEnt).对数线性分类器等:我们 ...

  9. java图片识别 [Tesseract-OCR]

    以下链接包含,安装包及程序运行需要的jar 包,中文资源包. 中文包使用方式:找到tessdata安装目录(我本地:C:\Program Files (x86)\Tesseract-OCR\tessd ...

  10. [KAFKA]kafka常用操作

    -- kafka路径示例 /opt/cloudera/parcels/KAFKA/bin-- kafka启动./kafka-server-start.sh -daemon ../config/serv ...