Vue中设置组件的自定义事件和解绑组件的自定义事件

组件的自定义事件

  • 设置School组件实现props,子给父传数据。School组件用于和Student组件做对比。

  • App向School组件传getSchoolName,School组件通过props接收存入School的VueConponent。随后通过调用getSchoolName实现子给父传递数据

  • 想让组件标签识别原生Vue提供的事件。需要加入native

    <School @click.native='show'/>
  • <template><div class="school"><h2>学校的名字:{{ name  }}</h2><button @click="sendSchoolName">测试sendSchoolName方法</button></div>
    </template>
    ​
    <script>
    export default {props: ['getSchoolName'],data(){return {name: '小猴子的玩具商'}},methods:{sendSchoolName(){this.getSchoolName(this.name)}},
    }
    </script>
    <style scoped>.school {background-color: pink;padding: 5px;margin-top: 30px;}
    </style>>
    ​
  • Student组件实现功能也是子给父传递数据。但用组件的自定义事件来实现

  • <template><div class="blue"><h2>学生的名字:{{ name }}</h2><h2>学生的名字:{{ address }}</h2><button @click="sendStudentName">测试sendStudentName方法</button></div>
    </template>
    <script>
    export default {name:'Student',data(){return {name:'boy',address:'老地方'}},methods: {sendStudentName(){// 事件在谁身上则在哪里触发,故触发Student组件实例身上的boy事件,emit有发射的意思。传了一个参数name给Appthis.$emit('boy',this.name)}},
    }
    </script>
    <style scoped>.blue{background-color: blue;padding: 5px;}
    </style>
     
  • Student和School组件实现的区别在于

    1、App中的getSchoolName方法是直接给School组件,School组件需要props接收一下,自己调用一下。

    2、App中的getStudentName方法不直接传给Student组件,而是利用触发事件( this.$emit() ) 的方式,调用demo

  • <template><div class="title"><router-view/><h2>{{ mas }}</h2><!-- 给组件的实列对象VueComponent上绑定事件(boy事件)。如果触发boy事件demo就被调用 --><!-- 第一种写法,<Student v-on:boy = "demo"/> --><!-- 第二种写法,用ref获取Student组件的VueComponent--><Student ref="student"/><!-- 通过父组件给子组件传递函数类型的props实现:子给父传递数据 --><School :getSchoolName ='getSchoolName'/></div>
    </template>
    ​
    <script>
    import Student from '../src/components/Student.vue'
    import School from '../src/components/School.vue'
    export default {name: 'App',components:{Student,School},data(){return {mas: '你好啊'}},methods: {//接收School组件传过来的namegetSchoolName(name){console.log('发送成功了',name);},//接收Student组件传过来的namedemo(name){console.log('demo被调用',name)}}
    },// 第二种写法的灵活性更高,当要求是:延迟3秒才触发事件。第二种方法可以实现。如下mounted(){setTimeout(()=>{// this.$refs.student为获取到Student组件的VueComponent,$on为当什么的时候。括号内的第一个元素为事件名,第二个元素为触发事件回调的方法this.$refs.student.$on('boy', this.demo)},3000)}
    </script>
    <style scoped>.title {background-color: gray;padding: 5px;}
     

    解绑组件的自定义事件

    • this.$off()//解绑一个自定义事件

    • this.$off([ ])//解绑多个自定义事件

    • this.$off()//解绑所有的自定义事件

    • this.$destroy()销毁当前组件的VueConponent,而Vue提供的事件还能响应

    • <template><div class="blue"><h2>学生的名字:{{ name }}</h2><h2>学生的名字:{{ address }}</h2><button @click="sendStudentName">测试sendStudentName方法</button><button @click="unbind">解绑自定义事件</button><button @click="death">销毁当前组件的实例化对象</button>
      ​</div>
      </template>
      ​
      <script>
      export default {name:'Student',data(){return {name:'boy',address:'老地方'}},methods: {sendStudentName(){// 事件在谁身上则在哪里触发,故触发Student组件实例身上的boy事件,emit有发射的意思。传了一个参数namethis.$emit('boy',this.name)this.$emit('girl')},unbind(){this.$off('boy')//解绑一个自定义事件this.$off(['boy','girl'])//解绑多个自定义事件this.$off()//解绑所有的自定义事件},death(){//销毁当前的Student组件的实例,销毁后所有的Student实列的自定义事件全都不奏效。this.$destroy()}},
      }
      </script>
      <style scoped>.blue{background-color: blue;padding: 5px;}
      </style>

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

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

相关文章

复兴计划01-lc06

StringBuilder和StringBuffer的区别 1. StringBuffer和StringBuilder都是用于字符串动态拼接,但是StringBuffer拼接的函数方法的实现中用了synchornized上锁&#xff0c;效率较低&#xff0c;不过可以用于多线程以此来维护线程安全&#xff1b;相比之下&#xff0c;StringBuil…

istio 限流:本地限流+全局限流

istio 限流在官网的位置是 任务->策略执行->使用 Envoy 启用速率限制 istio 限流基于数据面 Envoy 开发&#xff0c;Envoy 支持两个类型限流&#xff0c;分别是本地限流和全局限流&#xff08;本地限流和全局限流可以一起使用&#xff09; 开始之前 安装 istio部署 boo…

基于支持向量机SVM的界面黏附能预测,SVM的详细原理,SVM工具箱使用说明

目录 支持向量机SVM的详细原理 SVM的定义 SVM理论 Libsvm工具箱详解 简介 参数说明 易错及常见问题 完整代码和数据下载链接: 基于支持向量机SVM的界面黏附能预测(代码完整,数据齐全)资源-CSDN文库 https://download.csdn.net/download/abc991835105/88647878 SVM应用实例, …

2024.1.1力扣每日一题——经营摩天轮的最大利润

2024.1.1 题目来源我的题解方法一 模拟 题目来源 力扣每日一题&#xff1b;题序&#xff1a;1599 我的题解 方法一 模拟 计算当前上摩天轮的人数和等待的人数就可以得到该轮次的利润&#xff0c;然后一只更新最大利润就可以了。 时间复杂度&#xff1a;O(n)。n数组的长度 空…

Esp8266对接小爱同学

小爱同学接入流程 设备端开发 1.设置接入的设备类型 2.编译上传代码到设备 3.上线设备 绑定小爱同学 1.打开米家App。通过 我的>其他平台设备>点击添加>点灯科技>绑定账号 ,绑定blinker账号 2.绑定成功后,支持小爱控制的blinker设备会出现在 我的>其他平台…

滴滴高级Java面试真题

今年IT寒冬&#xff0c;大厂都裁员或者准备裁员&#xff0c;作为开猿节流主要目标之一&#xff0c;我们更应该时刻保持竞争力。为了抱团取暖&#xff0c;林老师开通了《知识星球》&#xff0c;并邀请我阿里、快手、腾讯等的朋友加入&#xff0c;分享八股文、项目经验、管理经验…

基于MQTT的开源全平台内网隧道穿透Tunnel服务搭建方法

我们在本地开发的时候经常需要进行公网的访问和调试, 这就需要用到内网穿透技术了, 今天介绍一款基于MQTT协议的, 低功耗,轻量级内网隧道穿透服务端和客户端, 基于go语言开发, 免费开源的内网隧道穿透服务工具 mqtt_tunnel 基于MQTT协议的内网穿透服务端 MQTT服务端 Mosqu…

Linux | 分布式版本控制工具Git【版本管理 + 远程仓库克隆】

文章目录 一、前言二、有关git的相关历史介绍三、Git版本管理1、感性理解 —— 大学生实验报告2、程序员与产品经理3、张三的CEO之路 —— 版本管理工具的诞生 四、如何在Linux上使用Git1、创建仓库2、将仓库克隆到本地3、git三板斧① git add② git commit③ git push 4、有关…

软件测试之自动化测试的四个阶段

第一阶段&#xff1a;API自动化 之前的想法是&#xff1a;通过API创建数据&#xff0c;访问数据&#xff0c;进行数据操作&#xff0c;存储数据库&#xff0c;通过模拟前端的操作来想象API的访问流程。 然后&#xff0c;验证数据库是否存储正确。后来发现该想法流程就是错误的…

2024/1/2 C++ work

全局变量&#xff0c;int monster 10000;定义英雄类hero&#xff0c;受保护的属性string name&#xff0c;int hp,int attck&#xff1b;公有的无参构造&#xff0c;有参构造&#xff0c;虚成员函数 void Atk(){blood-0;}&#xff0c;法师类继承自英雄类&#xff0c;私有属性 …

十大排序的个人总结之——冒泡排序、插入排序

同样&#xff0c;这两几乎也是被淘汰了的算法&#xff0c;尽管它们是稳定的&#xff0c;但是时间复杂度没人喜欢&#xff0c;了解一下就好&#xff0c;没啥好说的&#xff0c;注意最后一句话就行了 一&#xff0c;冒泡排序 1. 算法步骤 共n-1趟&#xff0c;谁两敢冒泡就换了…

Tomcat服务为什么起不来?

转载说明&#xff1a;如果您喜欢这篇文章并打算转载它&#xff0c;请私信作者取得授权。感谢您喜爱本文&#xff0c;请文明转载&#xff0c;谢谢。 服务跑在Tomcat下面&#xff0c;有时候会遇到Tomcat起不来的情况。目前为止常遇到的情况有如下几种&#xff1a; 1. Tomcat服务…

【VSCode】关闭双击shift出现搜索

原因 有时候总是手滑按两下shift&#xff0c;每次都会弹出如下图的搜索框&#xff0c;导致很不方便 解决办法 找到该文件 C:\Users\admin\.vscode\extensions\k--kato.intellij-idea-keybindings-1.5.12\package.json&#xff08;admin是自己的用户名&#xff09; 然后关键字…

前端文件上传组件最全封装+删除+下载+预览

前言&#xff1a;使用的是若依的框架element uivue2封装的。如果有不对的地方欢迎指出。后台管理使用&#xff0c;文件需要上传。回显列表&#xff0c;详情也需要回显预览 // 开始封装组件&#xff1a;封装在 src/components/FileUpload/index.vue中 <template><div c…

slf4j+logback源码加载流程解析

slf4j绑定logback源码解析 Logger log LoggerFactory.getLogger(LogbackDemo.class);如上述代码所示&#xff0c;在项目中通常会这样创建一个Logger对象去打印日志。 然后点进去&#xff0c;会走到LoggerFactory的getILoggerFactory()方法&#xff0c;如下代码所示。 public …

Maven介绍安装和配置详解

点击下载《Maven介绍安装和配置详解》 1. Maven介绍 Maven是一个自动化构建工具&#xff0c;主要用于Java项目的构建和管理。它使用一种基于项目对象模型&#xff08;POM&#xff09;的概念&#xff0c;使得开发者能够使用一种统一的方式来管理项目的构建、报告和文档。 以下…

大模型提效105篇必读论文和代码汇总,涵盖预训练、注意力、微调等7个方向

大型语言模型&#xff08;LLMs&#xff09;在NLP领域中具有显著的优势&#xff0c;它们在语言理解和生成方面表现出了强大的能力&#xff0c;甚至可以进行复杂的推理任务。这些能力能让大模型在许多领域都有广泛的应用前景&#xff0c;比如文本生成、对话系统、机器翻译、情感分…

【WinForm.NET开发】如何验证用户输入

本文内容 MaskedTextBox 控件事件驱动的验证隐式和显式验证关闭窗体和重写验证 用户在应用程序中输入数据后&#xff0c;建议在应用程序使用数据之前验证数据是否有效。 可以要求某些文本字段的长度不能为零&#xff0c;字段应设置为电话号码格式&#xff0c;或者字符串中不得…

论文阅读——EfficientViT(cvpr2023)

EfficientViT: Memory Efficient Vision Transformer with Cascaded Group Attention 1、 从三个角度探讨如何提高vision transformers的效率&#xff1a;内存访问、计算冗余和参数使用。 2.1. Memory Efficiency 红色字体表示操作所花费的时间主要由内存访问决定&#xff0c;…

C语言 linux文件操作(一)

文章目录 一、linux文件权限1.1文件描述符1.2文件描述符的范围和默认值1.3打开文件和文件描述符1.4标准文件描述符1.5文件描述符的重定向和关闭1.6I/O 操作1.7使用文件描述符进行进程通信1.8资源限制 二、C语言文件读写2.1open 函数2.2 flags参数详解2.3 lseek 函数 一、linux文…