首页 > 其他分享 >前端学习-vue学习011-Emit

前端学习-vue学习011-Emit

时间:2024-03-21 16:26:16浏览次数:27  
标签:vue childMsg 011 参数 组件 Emit msg

官方教程链接

子组件还可以向父组件触发事件

  • 子组件声明触发的事件,并且带参数触发
<script lang="ts" setup>
   const emit = defineEmits(['res'])
   emit('res','hi thisismy msg') // 第一个参数是事件名称,其他参数都会传给父组件
</script>
  • 父组件接收参数
<template>
  <Todo/>
  <Props @res="(msg) => { childMsg = msg}"/>
  <p>{{ childMsg }}</p>
</template>

<script lang="ts" setup>
  import Emit from './components/Emit.vue'
  const childMsg = ref('no msg yet')
  
</script>

标签:vue,childMsg,011,参数,组件,Emit,msg
From: https://www.cnblogs.com/ayubene/p/18087610

相关文章

  • .NET Emit 入门教程:第二部分:构建动态程序集(追加构建静态程序集教程)
    前言:在本部分中,我们将深入探讨如何使用C#Emit来创建动态程序集。动态程序集是在运行时生成的,为我们提供了一种灵活、动态地构建和加载程序集的能力。1.程序集的概念程序集是.NET中的基本部署单位,它包含了可执行代码、资源、元数据等信息,是.NET应用程序的基本组成单元之一。......
  • vue2/3 - element表格组件el-table实现懒加载树型(上下级)数据、默认展开和隐藏层级,支
    效果图在vue2、vue3项目开发中,使用element饿了么组件库,实现Table表格组件动态懒加载表格数据,可以决定是否自动展开所有2级或3级,也可以点击加载下级数据,可搭配表格的增删改查,数据变化后自动更新列表不会破坏树状的展开和折叠结构。提供详细示例代码,一键复制运行查看效果,稍......
  • vue2/3 - element组件库el-tree树形控件实现一键全选/一键反选取消/全部收起/全部折叠
    效果图在vue2、vue3|element饿了么组件库中,详细使用el-tree树状组件完成功能按钮组,支持全部选中节点、反选取消节点、对所有树节点进行折叠收起、是否上下级联动等等!提供详细示例代码教程,一键复制开箱即用~~示例代码请看下方代码及技术点介绍。<template><div......
  • Angular React Vue 比较 – 模板篇
    如果我们把组件篇比做是前端的JavaScript,那么模板篇则是HTML。三大框架中的模板在应用中呈现用户界面,就像常规HTML一样,但是它具有更多功能。Angular的模板在Angular中,*template* 是HTML的一个块。在模板中我们可以使用Angular的语法来构建更多的功能。编写......
  • vue2 txt日志打印以及读取txt文本数据
    1.创建log.js在根目录下letfs=require('fs')import{parseTime}from"./src/renderer/utils/index"import{MessageBox}from'element-ui'functionwriteLog(value){letlogAddress=localStorage.getItem('logAddress')......
  • 前端学习-vue学习009-侦听器
    官方教程链接侦听器:import{ref,watch}from'vue'constcount=ref(0)watch(count,(newCount)=>{console.log(`newcountis:${newCount}`)})pre标签:识别json对象中的\n\t等转义字符,展示原始的JSON对象结构。v-ifv-elseasyncawaitfetch<template>......
  • vue2扫码枪串口模式的使用
    1.下载依赖包  serialportnpmiserialport2.创建文件code-gun.jsvar{SerialPort}=require("serialport");//串口列表SerialPort.list().then((ports)=>{ports.forEach((port)=>{console.log(port);});}).catch((err)=&......
  • Node+Vue毕设社区居家养老管理系统(程序+mysql+Express)
    本系统(程序+源码)带文档lw万字以上 文末可获取本课题的源码和程序系统程序文件列表系统的选题背景和意义选题背景:在人口老龄化日益加剧的今天,社区居家养老已成为解决老年人养老问题的重要方式。随着社会经济的发展和科技的进步,老年人对于养老服务的需求不再局限于基本的......
  • vue-pdf 预览pdf (数据流)
         页面有个要预览pdf的需求,数据是从后台传递过来的数据流:1.安装插件:npminstallvue-pdf2.在页面引用:importpdffrom'vue-pdf'...components:{pdf},3.html中添加:<pdf:src="pdfUrl"></pdf>4.通过接口获取数据:downloadFile({id:this.id}).t......
  • vite+vue3+vuex 加密
    1.安装JSEncrypt  npminstalljsencrypt2.加密方法//加密算法import{JSEncrypt}from'jsencrypt';//加密functionencryptText(text){ constpublicKey='MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQCh5Nk2GLiyQFMIU+h3OEA4UeFbu3dCH5sjd/sLTxxvwjXq7JLqJbt2rC......