事件绑定

基础知识

使用场景

注意事项

v-on 绑定事件

语法

实例

$ref绑定事件

语法

实例

事件解绑

语法

实例

事件绑定

基础知识

使用场景

子组件==>父组件传数据

在父组件中给子组件绑定自定义事件，事件的回调在父组件中。

注意事项

组件上，默认绑定的事件为自定义事件；绑定原生事件的时候需要添加 native修饰符。

绑定一个名为click的自定义事件：<Demo @click="test"/>绑定一个click原生事件：<Demo @click.native="test"/>

v-on 绑定事件

语法

绑定事件在父组件中进行：


方法一：@事件名称=“函数名称”<Demo @atguigu="test"/>方法二：v-on:事件名称=“函数名称”<Demo v-on:atguigu="test"/> 在methods中配置回调函数

子组件传递参数：

<button @click="触发事件函数">结构中定义触发事件</button>触发事件函数中使用  this.$emit("事件名称", 参数);  传递参数

实例

父组件：

<template><Student @demo="Demotest" />//这里demo为事件名称  Demotest为函数名称</template><script>
import Student from "./Student.vue";export default {name: "School",components: {Student,},methods: {Demotest(name) {console.log("我是父组件，我是用v-on绑定事件传递参数", name);},},
};
</script>

子组件：

<template><button @click="sendStudent">点我传递学生信息</button></template><script>export default {name: "Student",data() {return {name: "张三",age: 18,};},methods: {sendStudent() {this.$emit("demo", this.name);//demo为事件名称，对应父组件的@demo事件//传递this.named这个参数},},};
</script>

$ref绑定事件

语法

绑定事件在父组件中进行：

<School ref= "实例名称" ></School>this.$refs.实例名称.$on("触发事件名称", 回调函数)

子组件传递参数：

<button @click="触发事件函数">结构中定义触发事件</button>触发事件函数中使用  this.$emit("事件名称", 参数);  传递参数

实例

父组件：

<template><Student ref="student" />//student为实例名称并非函数名称</template><script>
import Student from "./Student.vue";
export default {name: "School",components: {Student,},methods: {getStusentName(name) {console.log("school收到了student的名字", name);},},mounted() {console.log(this.$refs.student.$on("aaa", this.getStusentName));//student是实例名称  aaa是事件名称//getStusentName 是回调函数  此处只能在methods配置回调函数或者使用箭头函数否则this指向会出问题},
};
</script>

子组件：

<template><button @click="sendStudentName">点我传递Studentname</button>//此处sendStudentName为触发事件的函数名称</template><script>export default {name: "Student",data() {return {name: "张三",age: 18,};},methods: {sendStudentName() {this.$emit("aaa", this.name);//aaa为事件名称 需要对应父组件的事件名称},};
</script>

事件解绑

语法

解绑一个自定义事件：this . $off('事件名称') //字符串形式解绑多个自定义事件：this .$off([ ' 事件1', '事件2'])   //数组形式解绑所有自定义事件：this.$off()   //无参组件实例对象销毁，此组件身上的自定义事件全部失效vm 实例对象销毁， vm的所有 组件实例对象 身上的自定义事件全部失效

实例

mounted() {console.log(this.$refs.student.$on("aaa", this.getStusentName));},beforeDestroy() {this.$off("aaa");}

总结

v-on比$ref更加简单，但是$ref更加更加灵活。不局限于函数中而是可以分布在各个位置。

Vue 事件绑定与解绑相关推荐

jQuery事件绑定与解绑
一.jQuery事件方法描述执行时机 click() 触发或将函数绑定到指定元素的click事件单击鼠标时 dblclick() 触发或将函数绑定到指定元素的dblclick事件双击鼠标时 ...
组件的自定义事件(绑定、解绑)
温馨提示:总结在最下方,如若不想看代码,请滚动至最下方查看相关知识点,谢谢! App.vue <template><div class="app">< ...
js元素事件绑定与解绑兼容代码
一.元素事件的绑定方法兼容代码为任意元素绑定任意事件的兼容代码 /*** 为任意元素绑定任意事件* @param {*} element 元素* @param {*} type 事件类型* @par ...
JQuery_003_事件绑定与解绑
$(function () {//第一个按钮通过on的方式绑定点击事件$("#btn1").on("click",function () {alert(&quo ...
js 事件（绑定、解绑、三个阶段、相关方法）
事件绑定与解绑: DOM0级事件(这类事件可以使用 return false来阻止事件往下执行,包含默认事件) 绑定: html内<input οnclick=''> js中el.οncl ...
vue：组件自定义事件、绑定、解绑事件
vue:组件自定义事件.绑定.解绑事件自定义组件绑定事件: 使用方法:在引入组件中的methods定义一个回调方法,在组件标签中使用如下两种方式自定义事件,去到引入的组件的中,使用 this.$em ...
jQuery的绑定与解绑方法
jQuery的4种绑定方法一.bind()与unbind() I.bind():绑定 1.定义 2.语法 3.参数 4.案例 (1)绑定单一事件 (2)绑定多个事件 II.unbind():解绑 1 ...
Android 蓝牙开发（扫描设备、绑定、解绑）Kotlin版
Kotlin版蓝牙开发 (扫描设备.绑定.解绑) 前言运行效果图正文 ① 配置项目 ② 布局和样式 ③ 编码 1. 通知栏样式修改 2. 蓝牙设备列表适配器编写 3. 权限请求 4. 初始化蓝牙 ...
Android 蓝牙开发（扫描设备、绑定、解绑）
Android 蓝牙开发(扫描设备.绑定.解绑) 前言效果图一.配置项目二.布局和样式三.编码四.源码前言公司最近给我丢了一个蓝牙开发的项目,不了解怎么办呢,那当然是从最基础的开始了,所 ...

Vue 事件绑定与解绑

事件绑定

基础知识

使用场景

注意事项

v-on 绑定事件

语法

实例

$ref绑定事件

语法

实例

事件解绑

语法

实例

总结

Vue 事件绑定与解绑相关推荐

最新文章

热门文章