vue学习笔记23-组件事件⭐

组件事件

在组件的模板表达式中,可以直接使用$emit方法触发自定义事件;触发自定义事件的目的是组件之间传递数据

好好好今天又碰到问题了,来吧来吧

测试发现其他项目都可以 正常的run ,就它不行

搜索发现新建项目并进入以后,用指令npm i 安装依赖,再打开项目,但是安装依赖速度太慢了很浪费时间,等一下???,这不就是cnpm install

反思为什么之前的没有报错呢是我忘记什么步骤了吗➡️🤔回顾笔记1没有遗漏

解决嗯,删除重建,反向解决也是解决嘛,!!!希望有懂的师傅可以告诉我是为什么(已排除没有安装依赖+没有安装vite的可能)

按上篇创建两个组件构成,在父组件中引入子件。如下代码形成父子关系

<template><h3>组件事件</h3><Child/>
</template><script>
import Child from "./Child.vue"
export default {components:{Child}
}
</script>

如下在子件中增加一个button按钮

<template><h3>Child</h3><BUTTON @click="clickEventHandle">传递数据</BUTTON>
</template><script>
export default {methods:{clickEventHandle(){console.log("哈哈哈");}}
}
</script>

控制台已打印传递数据成功

本节内容则是将console.log打印换成如下,,

在父级中,如下 把someEvent这个字符串当作事件类型来处理

通过子集元素最终触发如下父级的事件的处理

(委托事件)

还可以触发多个

有意思的新东西:在父级中添加p标签

 script中添加并修改如下两个东西

 

页面显示如下

点击后

$emit回调,回调父组件传递的方法(事件)

当然将子件如下修改,一样能传递,子传父

温馨提示

组件之间传递数据的方案:

  1. 父传子:props
  2. 子传父:自定义事件(this.$emit)

 

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

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

相关文章

数据结构->双向链表带你体验开火车(哨兵)与拼接火车(应用)厢的乐趣

✅作者简介&#xff1a;大家好&#xff0c;我是橘橙黄又青&#xff0c;一个想要与大家共同进步的男人&#x1f609;&#x1f609; &#x1f34e;个人主页&#xff1a;橘橙黄又青-CSDN博客 目的&#xff1a;学习双向带头链表的增&#xff0c;删&#xff0c;查&#xff0c;销毁…

代码随想录算法训练营第41天|背包理论基础 滚动数组法 416.分割等和子集

背包理论基础 终于开始刷大名鼎鼎的背包问题了&#xff0c;背包问题有点复杂&#xff0c;我还是懂了但没完全懂&#xff0c;下面是我现在的理解&#xff0c;我们把dp[i][j]定义为i个物品在背包容量为j下的价值&#xff0c;那么这样就转换为如果要求价值&#xff0c;这个价值和前…

链表——单链表的C实现(保姆级代码、注释教学)

首先需要借助三个文件 SList.h SList.c test.c 目录 SList.h &#xff1a;用来建立结构体、头文件、函数声明、全局变量建立 SList.c&#xff1a;对头文件中声明的函数的实现 void SLTPrint(SLTNode* phead) SLTNode* BuyLTNode(SLTDataType x) voi…

《软件项目管理:从规划到实施的全面指南》

软件项目管理是当今信息技术领域中至关重要的一环。在一个数字化、信息化的时代&#xff0c;几乎所有行业都依赖于软件来支撑其业务流程和运营。然而&#xff0c;软件开发过程往往是复杂的&#xff0c;充满了挑战和风险。为了确保软件项目能够按时交付、在预算范围内完成&#…

『大模型笔记』大模型中的Scaling Law(规模法则)

大模型中的Scaling Law(规模法则) 文章目录 一. 核心结论二. 大模型中的Scaling Law三. 参考文献Scaling Laws简单介绍就是:随着模型参数量大小、数据集大小和用于训练的浮点数计算量的增加,模型的性能会提高。并且为了获得最佳性能,所有三个因素必须同时放大。当不受其他两…

每日OJ题_牛客OR57 手套

目录 牛客OR57 手套 解析代码 牛客OR57 手套 手套_牛客题霸_牛客网 class Gloves { public:int findMinimum(int n, vector<int> left, vector<int> right) {} }; 解析代码 class Gloves { public:int findMinimum(int n, vector<int> left, vector<i…

C++析构函数详解

目录 如果对你有帮助的话&#xff0c;点个赞吧&#xff01; 析构函数概念&#xff1a; 析构函数定义&#xff1a;类名前面加上~ 注意事项&#xff1a; 关于对象的销毁顺序&#xff1a; 析构函数概念&#xff1a; 在对象销毁的时候会自动调用析构函数&#xff0c;对相关资源…

Tomcat容器经常重启问题排查

报错代码: INFO [Catalina-utility-2] org.apache.catalina.core.StandardContext.reload Reloading Context with name [] has started1.查看内存占用情况:top 可以发现java线程正常情况下占用高达24%的内存资源 2.继续排查:top -Hp 29580 可以发现主要有子线程Catalina-ut…

探索ChatGPT在软件架构师工作中的应用

随着人工智能技术的不断发展&#xff0c;自然语言处理模型如OpenAI的ChatGPT已经成为了解决各种实际问题的强大工具之一。在软件架构师这个领域&#xff0c;ChatGPT也有着广泛的应用。本文将探讨软件架构师如何有效地利用ChatGPT来解决问题和提高工作效率。 ChatGPT简介 Chat…

Java高级编程—注解

文章目录 1.注解的概述2.常见的Annotation示例2.1 生成文档相关的注解2.2 在编译时进行格式检查的注解2.3 跟踪代码依赖性&#xff0c;实现替代配置文件功能的注解 3.自定义Annotation4.JDK中的元注解4.1 Retention4.2 Target4.3 Documented & Inherited 5. JDK8中注解的新…

vue 中的性能优化

1&#xff09;编码优化 尽量减少data中的数据&#xff0c;data中的数据都会增加getter和setter&#xff0c;会收集对应的watcherv-if和v-for不能连用如果需要使用v-for给每项元素绑定事件时使用事件代理SPA 页面采用keep-alive缓存组件在更多的情况下&#xff0c;使用v-if替代…

服务器出现故障如何恢复数据?

服务器数据恢复案例之服务器raid6中3块硬盘离线导致阵列崩溃的数据恢复案例 服务器故障&#xff1a; 服务器中有一组由6块盘组建的 RAID6&#xff0c;这台网站服务器上运行MYSQL数据库和存放其它类型的文件。该组raid中有两块磁盘离线&#xff0c;管理员没有及时更换磁盘&#…

【Numpy】练习题100道(1-25题)

#学习笔记# 在学习神经网络的过程中发现对numpy的操作不是非常熟悉&#xff0c;遂找到了Numpy 100题。 Git-hub链接 目录 1 题目列表&#xff1a; 2 题解&#xff1a; 1 题目列表&#xff1a; 导入numpy包&#xff0c;并将其命名为np&#xff08;★☆☆&#xff09; 打印…

【Flink SQL】Flink SQL 基础概念:数据类型

Flink SQL 基础概念&#xff1a;数据类型 1.原子数据类型1.1 字符串类型1.2 二进制字符串类型1.3 精确数值类型1.4 有损精度数值类型1.5 布尔类型&#xff1a;BOOLEAN1.6 日期、时间类型 2.复合数据类型3.用户自定义数据类型 Flink SQL 内置了很多常见的数据类型&#xff0c;并…

常用的推荐算法

推荐系统在帮助用户发现可能感兴趣的产品、服务或信息方面发挥着重要作用。下面是一些常用的推荐算法&#xff1a; 1. 协同过滤 用户基于协同过滤&#xff08;User-Based Collaborative Filtering&#xff09; 基于用户之间的相似性为用户推荐物品。算法会找出与目标用户兴趣…

Spring boot创建第一个项目

作者简介&#xff1a; zoro-1&#xff0c;目前大二&#xff0c;正在学习Java&#xff0c;数据结构&#xff0c;spring等 作者主页&#xff1a; zoro-1的主页 欢迎大家点赞 &#x1f44d; 收藏 ⭐ 加关注哦&#xff01;&#x1f496;&#x1f496; Spring boot创建第一个项目 sp…

基于单片机的视觉导航小车设计

目 录 摘 要 I Abstract II 引 言 1 1 总体方案设计 3 1.1 方案论证 3 1.2 项目总体设计 3 2 项目硬件设计 4 2.1 主控模块设计 4 2.1.1单片机选型 4 2.1.2 STM32F103RCT6芯片 4 2.2单片机最小系统电路 5 2.3电机驱动模块设计 7 2.4红外模块设计 8 2.5红外遥控模块设计 9 2.6超…

设计模式深度解析:工厂方法模式与抽象工厂模式的深度对比

​&#x1f308; 个人主页&#xff1a;danci_ &#x1f525; 系列专栏&#xff1a;《设计模式》 &#x1f4aa;&#x1f3fb; 制定明确可量化的目标&#xff0c;坚持默默的做事。 探索设计模式的魅力&#xff1a;工厂方法模式文章浏览阅读17k次&#xff0c;点赞105次&#xff0…

Axure 单键快捷键 加快绘图速度 提高工作效率

画图类 R&#xff1a;绘制矩形 先点击空白页面&#xff0c;输入R即可绘制 L&#xff1a;绘制直线 先点击空白页面&#xff0c;输入L即可绘制&#xff0c;绘制的时候按住shift直线 O&#xff1a;绘制圆 先点击空白页面&#xff0c;输入O即可绘制&#xff0c;绘制的时候按…

skynet cluster集群笔记

skynet cluster集群笔记 前言cluster相关方法说明集群设计方案&#xff1a;集群中常遇到的问题&#xff1a;注意事项&#xff1a; 前言 skynet 是一个基于事件驱动的分布式游戏服务器框架&#xff0c;支持构建高性能、高并发的网络程序。在 skynet中&#xff0c;集群是指将多个…