Vue2:给组件绑定自定义事件

一、场景描述

我们在页面开发中,难免要使用事件。

在之前的学习中,我们学过@click、@keyup、@change等事件,这些是Vue自带的事件。

它的使用前提是,只能用在原生的HTML元素上。

比如:

html 复制代码
h1绑定一个click事件。
<h1 @click="test">你好</h1>
iput绑定一个keyup事件.
<input type="text" @keyup.enter="add"/>

这一篇说的自定义事件,可以绑定到我们自己的Vue组件上。

实现子组件给父组件传递数据的功能。

比如:

html 复制代码
<School :getSchoolName="getSchoolName"/>

二、绑定自定义事件

方式1

使用@或v-on方式绑定自定义事件

App父组件中:

模板代码:

html 复制代码
 <Student @test="getStudentName"/>

methods函数:

js 复制代码
getStudentName(name,...params){
    console.log('App收到了学生名:',name,params)
}

Student子组件中:

模板代码:

html 复制代码
<button @click="sendStudentlName">把学生名给App</button>

methods函数:

js 复制代码
//触发Student组件实例身上的test事件	传递多个参数
this.$emit('test',this.name,666,888,900)

方式2

使用ref方式绑定自定义事件
App父组件中:

模板代码:

html 复制代码
<Student ref="student"/>

mounted属性:

js 复制代码
        mounted() {
            //设置三秒后再绑定事件
            // setTimeout(() => {
            //     this.$refs.student.$on('test',this.getStudentName) //绑定自定义事件    第一个参数是事件名称,第二个参数是函数名称
            // },3000);
            // this.$refs.student.$on('test',this.getStudentName) //绑定自定义事件    第一个参数是事件名称,第二个参数是函数名称
            this.$refs.student.$once('test',this.getStudentName) //绑定自定义事件(一次性)
        }

Student子组件中:

方式1相同

三、总结

原则:给那个组件的vc实例绑定事件,就由那个组件的vc实例来触发事件

相对来讲,第二种方法更灵活,第一种方法更简便,各有优势,视具体情况选择使用。

相关推荐
灵犀学长6 分钟前
解锁HTML5页面生命周期API:前端开发的新视角
前端·html·html5
源码云商13 分钟前
基于 SpringBoot + Vue 的 IT 技术交流和分享平台的设计与实现
vue.js·spring boot·后端
江号软件分享14 分钟前
轻松解决Office版本冲突问题:卸载是关键
前端
致博软件F2BPM21 分钟前
Element Plus和Ant Design Vue深度对比分析与选型指南
前端·javascript·vue.js
慧一居士1 小时前
flex 布局完整功能介绍和示例演示
前端
DoraBigHead1 小时前
小哆啦解题记——两数失踪事件
前端·算法·面试
一斤代码7 小时前
vue3 下载图片(标签内容可转图)
前端·javascript·vue
中微子7 小时前
React Router 源码深度剖析解决面试中的深层次问题
前端·react.js
光影少年7 小时前
从前端转go开发的学习路线
前端·学习·golang
中微子7 小时前
React Router 面试指南:从基础到实战
前端·react.js·前端框架