子组件向父组件传值$emit

news2024/12/23 15:17:06

点击子组件的按钮,将子组件的值传递给父组件,并进行提示。

子组件

<template>
  <div>
    <button @click="emitIndex">clickme</button>
  </div>
</template>
<script>
export default {
  methods: {
    emitIndex() {
      //$emit 绑定一个自定义事件, 当这个语句被执行时, 就会将参数 arg 传递给父组件,父组件通过 v-on 监听并接收参数。
      //returnData:对应父组件的函数名
      //hello world:传递给returnData函数的值
      this.$emit('returnData', 'hello world')
    }
  }
}
</script>

父组件

 
 <template>
  <!-- 子组件中$emit绑定的returnData事件 -->
  <childemit @returnData="returnChildData"></childemit>
</template>
<script>
// 引用子组件
import Childemit from './testComponent/childemit.vue'
export default {
  methods: {
    //returnChildData:绑定的函数
    //childStr:子组件传过来的值
    returnChildData(childStr) {
      alert('这里是父组件,接收到子组件的值为:' + childStr)
    }
  },
  // 组件注册
  components: {
    Childemit
  }
}
</script>

效果

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2210336.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

计算机毕业设计Django+Vue.js豆瓣图书推荐系统 图书评论情感分析 豆瓣图书可视化大屏 豆瓣图书爬虫 数据分析 图书大数据 大数据毕业设计 机器学习

《DjangoVue.js豆瓣图书推荐系统》开题报告 一、研究背景与意义 1. 研究背景 随着数字化时代的来临&#xff0c;图书资源日益丰富&#xff0c;用户面临着信息过载的问题。如何在海量图书中快速找到符合个人兴趣和需求的书籍成为了亟待解决的问题。传统的图书检索方式往往基于…

【含开题报告+文档+PPT+源码】基于SpringBoot的景区酒店点评系统的设计与实现

开题报告 旅游业的快速发展使得越来越多的人选择旅游作为休闲和放松的方式。景区酒店作为旅游的重要组成部分&#xff0c;承担着提供住宿和服务的重要角色。然而&#xff0c;对于游客来说&#xff0c;在选择合适的景区酒店时往往存在信息不对称的问题&#xff0c;缺乏可靠的点…

Windows 下安装 jdk8

一、简介 JDK&#xff1a;Java SE Development Kit&#xff08;Java 开发工具&#xff09;。JRE&#xff1a;Java Runtime Environment &#xff08;Java 运行环境&#xff09;。 如果想进行 Java 编程&#xff08;开发人员&#xff09;&#xff0c;需要安装 JDK&#xff1b;如…

【含开题报告+文档+PPT+源码】基于过滤协同算法的城市旅游网站的设计与实现

开题报告 几年的疫情对生活的各个领域都产生了巨大的影响&#xff0c;疫情之后&#xff0c;随着国内经济的加速复苏&#xff0c;旅游业也迅速回暖。2023 年我国旅游需求迅速增多&#xff0c;一季度旅游人次为12.16 亿人次&#xff0c;较 2022 年同期增长了 46.5%。在当今数字化…

79 NAT-NAT444端口块静态映射

NAT444&#xff08;Network Address Translation 444&#xff09;是一种网络地址转换技术&#xff0c;用于将私有IP地址转换为公有IP地址&#xff0c;实现私有网络与公有网络之间的通信。 端口块静态映射是NAT444中的一种映射方式&#xff0c;它将一组端口范围映射到一个公有I…

GO 语言协程知识点学习笔记

GO 语言协程知识点学习笔记 是个人从互联网上学习整理的笔记。因个人技艺不精&#xff0c;如有纰漏&#xff0c;还请斧正。 协程&#xff1f; 协程并不是 GO 语言特有的机制&#xff0c;像 Lua、Ruby、Python、Kotlin、C/C 也都有协程的支持。区别在于有些是从语言层面支持&a…

【2024最新】基于springboot+vue的xxxx平台lw+ppt

作者&#xff1a;计算机搬砖家 开发技术&#xff1a;SpringBoot、php、Python、小程序、SSM、Vue、MySQL、JSP、ElementUI等&#xff0c;“文末源码”。 专栏推荐&#xff1a;SpringBoot项目源码、Vue项目源码、SSM项目源码、微信小程序源码 精品专栏&#xff1a;Java精选实战项…

linux源码安装slurm以及mung和openssl

一、源码安装munge 1、编译安装munge &#xff08;1&#xff09;下载munge地址&#xff1a;https://github.com/dun/munge/releases &#xff08;2&#xff09;解压编译安装&#xff1a; 1 2 3 4 5 6 7 8 创建/data目录 复制文件munge-0.5.15.tar.xz 到/data目录下 tar -Jx…

模型 知识诅咒

系列文章 分享 模型&#xff0c;了解更多&#x1f449; 模型_思维模型目录。知者难悟无知惑。 1 知识诅咒案例 1.1 会议室的误解 李经理是一家科技公司的产品经理&#xff0c;他负责领导一个新产品的开发项目。项目团队由不同背景和经验的成员组成&#xff0c;包括新入职的员…

php 生成随机数

记录:随机数抽奖 要求:每次生成3个 1 - 10 之间可重复(或不可重复)的随机数,10次为一轮,每轮要求数字5出现6次、数字4出现3次、…。 提炼需求: 1,可设置最小数、最大数、每次抽奖生成随机数的个数、是否允许重复 2,可设置每轮指定数字的出现次数 3,可设置每轮的抽奖…

(32)噪声信号的时域分析:均值、方差、与功率

文章目录 前言一、生成噪声信号并画图二、计算信号的均值、方差、与功率三、结果分析 前言 本文对叠加了高斯白噪声的一段整周期余弦信号进行时域分析&#xff0c;使用MATLAB进行信号生成&#xff0c;并计算其均值、方差、与功率。最后给出对计算结果的分析&#xff0c;阐明均…

组装首页:其他组件html、css移入JS中再引入首页

组装首页 <!DOCTYPE html> <html lang"zh-CN"><head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>组装首页</title><style>* …

Java-Exception与RuntimeException

&#x1f496;简介 &#x1f4d6;Exception Exception 类是所有非致命性异常的基类。这些异常通常是由于编程逻辑问题或外部因素&#xff08;如文件不存在、网络连接失败等&#xff09;导致的&#xff0c;可以通过适当的编程手段来恢复或处理。Exception 可以进一步分为两大类…

分享一些常用的数据库性能监测工具

以下是一些常用的数据库性能监测工具&#xff1a; 一、MySQL MySQL Enterprise Monitor&#xff1a; 由 MySQL 官方推出&#xff0c;提供全面的数据库性能监控、诊断和优化功能。可以监控数据库的各种指标&#xff0c;如查询性能、连接数、缓存命中率等&#xff0c;并提供警报…

目标检测——YOLO11算法解读

作者&#xff1a;Ultralytics公司 代码&#xff1a;https://github.com/ultralytics/ultralytics YOLO系列算法解读&#xff1a; YOLOv1通俗易懂版解读、SSD算法解读、YOLOv2算法解读、YOLOv3算法解读、YOLOv4算法解读、YOLOv5算法解读、YOLOR算法解读、YOLOX算法解读、YOLOv6算…

(南京观海微电子)——HKC_5.0_QP050AS01-1_MIPI_LVDS_RGB原理及代码介绍

1. MIPI 2. LVDS 3. TTL 4.代码 //初始化代码 Generic_Short_Write_1P(0xee,0x01); // ENTER PAGE1 Generic_Short_Write_1P(0xea,0x07); Generic_Short_Write_1P(0xeb,0x12); Generic_Short_Write_1P(0x0a,0x76); // vcom //Generic_Sh…

兆易创新Cortex-M7 GD32H459适配OpenHarmony轻量系统适配教程

笔者利用国庆假期的时间适配了一款Cortex-M7 的国产厂商兆易创新GD32H459&#xff0c;开源地址&#xff1a;https://gitee.com/GD32H759_OpenHarmony OpenHarmony 4.1r 轻量系统移植到GD32H759文档 1.学习本文档的意义 1.学习如何移植OpenHarmony轻量系统4.1r到GD32 m7内核G…

[论文期刊|稳定检索]2024年信号处理与光学工程国际会议(SPOE 2024 )

2024年信号处理与光学工程国际会议 2024 International Conference on Signal Processing and Optical Engineering 【1】大会信息 会议名称&#xff1a;2024年信号处理与光学工程国际会议 会议简称&#xff1a;SPOE 2024 大会时间&#xff1a;请查看官网 大会地点&#xf…

【JS试题】对象键排序问题的神仙试题

前言 题目如下&#xff1a; const obj { a: 0 } obj[1] 0 obj[obj.a] obj.a const values Object.values(obj) obj[values[1]] obj.a console.log(obj);在此之前需要先了解 JS 对象键的排序问题&#xff0c;JS会对对象的属性进行处理&#xff0c;把所有 Number类型 和 数…