Emit事件

于 2024-09-03 20:35:11 发布
阅读量192 收藏
点赞数 8
文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ou050719/article/details/141871059
版权

Emit

我们可以用emit把子组件的东西向父页面传

比如

子组件写了一个按钮和一个输入框,按钮定义了点击事件,输入框定义了改变事件,在script中定义了emit,这是必须得,中括号里面的东西是要把这两个方法传到父页面的名称,然后在方法里面定义好了

然后来到父组件

父页面是一块设定了宽和高还有背景颜色的一个页面,通过子组件传过来的方法截取其中的随机数,然后根据随机数改编背景颜色,还有就是跟子组件输入框传过来的值来改变父页面的文字大小

暮夜明
关注
  • 8
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue3 setup 中的 emit事件触发
web18484626332的博客
03-09 438
** vue3 setup 中的 emit事件触发 ** 父组件 <template> <PaymentDlg ref="paymentDlg" @onSaveOk="paymentTest" /> </template> <script setup> import PaymentDlg from './dashboards/payment-dlg.vue' import { ref } from "vue"; const paymentDlg = ref(
vue+element el-menu递归多层菜单$emit事件失效
周家大小姐
07-19 1147
父组件 <!-- 左边菜单 --> <left-menu @handleLeftMenu='handleLeftMenu' :menuList='menuList' /> import LeftMenu from '@/components/leftMenu' data() { return { currentComponent: 'Dic', menuList: [ .
vue3中组件递归，子组件emit事件失效解决办法
qq_52273262的博客
01-08 1894
在嵌套的子组件加上emit事件的监听，缺点就是控制台有警告。用vuex / pinia 代替父子通信。
vue 组件递归后 $emit事件失效
versious的博客
03-25 1994
父组件代码： 子组件： 然后发现子组件递归后的组件，使用this.emit没有生效，一脸懵逼。最后在子组件里的递归组件上加上v−bind="emit没有生效，一脸懵逼。 最后在子组件里的递归组件上加上 v-bind="emit没有生效，一脸懵逼。最后在子组件里的递归组件上加上v−bind="attrs" v-on="$listeners"，又一脸懵逼的解决了， ...
Vue 组件 emit事件，JSX获取
month_ss_815的博客
03-04 5368
//组件 JSX语法 components:{ diglog, testCom:{ props:{}, render(h){ //子组件this.$emit('getVlaue',this.digput) return (<diglog on-getVlaue={this.handleCom}></di...
【vue3 之 emits & $emit() 讲解 】监听子组件事件、emit事件验证、options写法、composition setup写法
热门推荐
从今年开始写写博客~~
04-03 2万+
emits 可以是数组或对象，从组件触发自定义事件，emits 可以是简单的数组，也可以是对象。 1、数组形式和对象形式的值为null，表示该emit事件无验证函数。 2、对象形式且值为函数表示该 emit 配置了事件验证 验证函数必须有return 真假值，真值表示通过验证，假值则 vue 会自动抛出 warn 警告！不 return 值默认当做失败，抛出 warn 警告！ 验证函数主要就是验证参数是否正确，并不会在 return false 时中断emit() 事件！
vue使用$emit时,父组件无法监听到子组件的事件实例
01-21
vue使用$emit时，父组件无法监听到子组件的事件的原因是$emit传入的事件名称只能使用小写，不能使用大写的驼峰规则命名 <p>{{ total }} <button-counter v-on:ee=incrementTotal></button-counter> ...
$emit触发事件拿不到传递的参数.zip
10-29
在Vue.js框架中，`$emit`是用来在组件实例中触发自定义事件的，通常用于父子组件间的通信。然而，有时候我们可能会遇到一个问题，即在父组件中通过`$on`监听子组件触发的事件时，无法接收到传递的参数。这个问题可能...
emit事件 父组件如何调用
03-27
触发子组件的emit事件 import Child from './Child.vue' export default { components: { Child }, methods: { handleClick() { this.$refs.child.$emit('eventName', arg1, arg2) } } } ``` 在子...
前端的面试题
本人小可爱
08-30 672
【代码】前端的面试题。
vue3+vite 通过js引入的src，在打包后为什么不能显示
肖肖肖丽珠的博客
09-02 142
页面有个图片我是动态设置的。但是打包之后一直没有找到。我本来使用的绝对定位发现不行，改成了相对的也不行，最后改成下面的这种就可以啦。
vue3+el-tale封装（编辑、删除、查看详情按钮一起封装）
CallMe_CrabXie的博客
08-27 773
对应的tableData和tableDataHeader文件（实际开发中，应该从后端拿tableData，tableHeader根据情况自定义）
跨页面进行数据通讯
最新发布
榴莲不好吃的专栏
09-02 355
Broadcast Channel API 允许在一个源的不同窗口、标签页或 iframe 之间进行通信。这是一种实时的通信机制，非常适合需要实时同步数据的场景。3.iframe 数据通讯 postMessage/message（可设置不同源数据通讯）1.使用 LocalStorage 或 SessionStorage（同源）// 检查消息来源，确保来自正确的源。// 检查消息来源，确保来自正确的源。'Hello 来自父亲的消息!'Hello 来自儿子的消息!// 忽略来自自身的消息。
Window Performance API
Bruce__taotao的博客
08-28 1842
Window Performance API 是一组浏览器提供的接口，用于收集和分析网页性能数据。它允许开发者精确地测量网页加载时间、资源加载时间、用户交互延迟等性能指标，从而优化用户体验。1. 主要接口1.1返回一个高精度时间戳，通常用于计算精确的时间差。例如，你可以用它来测量函数执行时间。使用场景: 精确计算代码段的执行时间。// 执行某个任务console.log(`执行时间:${// 执行某个任务 const end = performance . now();
vue 通过事件的形式调用全局组件
liux6687的博客
08-29 1648
通过vue.use 挂载组件，然后在vue 原型上添加属性, 再通过调用属性方法传参的形式控制组件。这里我是写了一个文件上传组件。
js对象操作常用方法
m0_75276704的博客
09-02 326
2.构造函数创建 2.方括号 三、添加属性 四、删除属性 五、判断属性是否存在 1.in运算符 2.hasOwnProperty方法 六、遍历对象属性 1.for...in...循环 2.Object.keys，Object.values，Object.entries 七、深拷贝与浅拷贝 1.浅拷贝 2.深拷贝 八、合并对象 Object.assign 九、其他方法 1.Object.is() 比较两个
AI 大模型时代，对前端工程师有哪些机遇和挑战？
Z4400840的博客
08-28 2595
AI 大模型时代为前端工程师带来了丰富的机遇，同时也带来了挑战。前端工程师需要积极适应这些变化，掌握新的技能，以抓住时代发展的红利。通过不断学习和提升技术水平，前端工程师可以在AI时代中发挥更大的作用，创造更多的价值。
从面向对象(OOP)到面向切面(AOP)：编程范式的演变
妍思码匠的博客
08-30 1267
本文深入探讨了面向切面编程（AOP）在前端开发中的应用，解释了AOP如何通过动态增强与代码复用、降低模块间耦合度，为前端项目带来更高效、更模块化的解决方案。通过具体案例分析，如日志记录切面和动态埋点的实现，展示了如何利用装饰器模式、高阶组件等技术在前端实现AOP。理解AOP的原理与实践，将有助于开发者构建更易于维护和扩展的前端应用。无论你是前端新手还是资深开发者，本文都将为你提供有价值的见解和实用技巧。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值