this.$emit使用方法【前端技术】

2023-11-11

this.$emit()主要用于子组件向父组件传值。

下面就给大家举一个实际开发中使用到的案例。

需求:

        点击关联项目,弹出关联项目数据进行选择一条数据,点击确定,项目编号会回显到关联项目中。

1新增页面

2 新增页面中点击关联项目弹出的页面

 

 3实现效果

 

 实现传值需要用this.$emit代码

这个页面就是新增页面中点击关联项目弹出的页面(子页面)

 

this.$emit('projectInfo', this.linkProjectInfoNum);

参数projectInfo【方法名】:表示父组件名绑定的方法。

参数this.linkProjectInfoNum【项目编号】:表示传递给另一个页面的值。

参数可以传多个

 然后在新增页面中进行一个监听

 其中<link-bill-list就是子页面(新增页面中点击关联项目弹出的页面)的vue的文件名

ref:子页面文件名

@projectInfo就是监听的名字。下面这个

 其他的两个也是在监听,不用管,你自己需要就可以加。

然后@projectInfo="projectInfo"其中引号引起来的是对监听执行的方法

然后你可以获取到value,value就是一开始在子页面赋值的值this.linkProjectInfoNum。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

this.$emit使用方法【前端技术】 的相关文章

随机推荐

  • mongodb教程_MongoDB教程

    mongodb教程 Welcome to the MongoDB tutorial index post MongoDB is one of the most widely used NoSQL database 欢迎使用MongoDB教程
  • 终于搞定了部分网站无法打开的问题

    最近机器出现一个烦人的问题 有些网站无法打开 最初以为是实验室网络的问题 后来发现别人的机器能打开 于是开始折腾自己的机器了 hosts文件没有异常 关掉杀毒软件 防火墙 症状依旧 在浏览器地址栏中敲入url回车之后 浏览器很快报错无法访问
  • 使用过滤器,格式化超过1万和1千的数字,保留一位小数

    filters handleCount count if count gt 10000 count count count 1000 10000 W else if count gt 1000 count count count 100 1
  • 如何查找出Linux使用的shell版本号

    一 找出正在使用的shell类别 有很多种方法可以找出目前正在使用的shell类别 最简单的方法是使用特殊的shell参数 1 通过特殊的shell参数 可以查找出正在运行的shell的PID 参数是只读的不能修改 下面的指令也可以显示正在
  • uni-app image懒加载

    1 uni app官方给的文档注意看 lazy load Boolean false 图片懒加载 只针对page与scroll view下的image有效 微信小程序 百度小程序 字节跳动小程序 飞书小程序 只针对page与scroll v
  • windows 安装 Linux 子系统教程 (wsl)

    目录 背景 安装 wsl 安装 php 背景 因为日常工作中有一些场景需要使用 Linux 环境 并且有时候需要写一些自动化脚本来方便提效 而 wsl 具备安装便捷 占用轻量 使用便捷的特性 所以 wsl 无疑是最好的选择 安装 wsl 使
  • cmake 返回当前路径的上层路径 string(REGEX REPLACE...)

    返回当前路径的上层路径 先上实现代码 string REGEX REPLACE learn basic 1 PROJECT INIT PATH PROJECT SOURCE DIR 说明 CMakeLists txt 所在路径 可由cmak
  • 3、Jupyter Notebook,Matplotlib的使用

    目录 1 Jupyter Notebook使用 1 1 界面启动 创建文件 1 1 1 界面启动 1 1 2 新建notebook文档 2 Matplotlib使用 2 1 实现一个简单的Matplotlib画图 2 2 Matplotli
  • USB OTG的工作原理

    USB OTG的工作原理 OTG补充规范对USB 2 0的最重要的扩展是其更具节能性的电源管理和允许设备以主机和外设两种形式工作 OTG有两种设备类型 两用OTG设备 Dualrole device 和外设式OTG设备 Peripheral
  • xorl %eax, %eax

    这是GNU的汇编 xorl eax eax 这句起什么作用 按位异或 相同的位置为0 不同的位置为1 eax和eax的每一位都相同 所以相当于清零 movl 8 ebp ecx testl ecx ecx 这句起什么作用 jle L3 8
  • redhat 个人版注册订阅实现可以使用yum安装软件

    Redhat个人版使用入门 第一步安装redhat虚拟机 redhat注册订阅 创建账号 过程可能比较慢 所以需要耐心等待 第一步安装redhat虚拟机 略 如果你还不会使用虚拟机安装系统 请先移步百度如何使用虚拟机安装linux系统 re
  • mac配置vim语法高亮

    mac可能不同于linux macos都会内置了vim 和 vi 但都没有语法高亮 找到vimrc文件的位置 macos一般是在 usr share vim路径下 即 usr share vim vimrc 如果找不到这个路径 打开vim
  • GitHub的注册与使用(详细图解)

    首先 你需要注册一个 github账号 最好取一个有意义的名字 比如姓名全拼 昵称全拼 如果被占用 可以加上有意义的数字 本文中假设用户名为 chuaaqiCSDN 我的博客名的全拼 一 gihub账号注册与仓库创建 1 注册账号 地址 h
  • 解决adobe firefly 无法加载msvcp.dll的

    问题 在运行adobe firefly的运行程序的时候报错 adobe photoshop firefly unable to load a required component msvcp140 dll 解决方法 1 访问网页 Lates
  • xxl-job的使用以及与spring boot整合

    官网教程 中文教程 gitee https gitee com xuxueli0323 xxl job github https github com xuxueli xxl job xxl job主要分为调度中心和执行器项目 调度中心对应
  • Java8函数式编程

    文章目录 Java8函数式编程 简介 为什么需要再次修改Java 什么是函数式编程 Lambda表达式 引用值 而不是变量 函数接口 类型推断 流 常用的流操作 生成流 collect toList 返回集合 map将一个流中的值转为另一个
  • 算法训练营第十九天(8.1)

    目录 LeeCode530 Minimum Absolute Difference in BST LeeCode501 Find Mode in Binary Search Tree LeeCode236 Lowest Common Anc
  • 梯度下降的三种形式——BGD、SGD、MBGD

    机器学习里面 梯度下降法可以说是随处可见 虽然它不是什么高大上的机器学习算法 但是它却是用来解决机器学习算法的良药 我们经常会用到梯度下降法来对机器学习算法进行训练 BGD SGD MBGD 也就是批量梯度下降法BGD 随机梯度下降法SGD
  • 如何用Redis实现用户关注

    Redis实现互相关注功能 在实现社交网络功能中 实现互相关注是必不可少的 在这里 我们将使用Redis来实现这个功能 前端使用Vue框架实现 功能要求 我们需要实现以下几个功能 用户能够关注其他用户 用户能够取消关注其他用户 用户能够查看
  • this.$emit使用方法【前端技术】

    this emit 主要用于子组件向父组件传值 下面就给大家举一个实际开发中使用到的案例 需求 点击关联项目 弹出关联项目数据进行选择一条数据 点击确定 项目编号会回显到关联项目中 1新增页面 2 新增页面中点击关联项目弹出的页面 3实现效