Vue中事件绑定与解绑方法如何改写为长尾？

本文共计1070个文字，预计阅读时间需要5分钟。

目录- 事件绑定- 基础知识- 使用场景- 注意事项- v-on 绑定事件- 事件解绑- 总结- 组件绑定- 父组件传数据- 在父组件中绑定

目录

• 事件绑定
• 基础知识
• 使用场景
• 注意事项
• 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更加更加灵活。不局限于函数中而是可以分布在各个位置。

以上为个人经验，希望能给大家一个参考，也希望大家多多支持易盾网络。