vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > Vue事件绑定与解绑

Vue中的事件绑定与解绑方式

作者:“玫瑰无原则 ”

这篇文章主要介绍了Vue中的事件绑定与解绑方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

事件绑定

基础知识

使用场景

注意事项

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

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> 

事件解绑

语法

组件实例对象销毁,此组件身上的自定义事件全部失效 

vm 实例对象销毁, vm的所有 组件实例对象 身上的自定义事件全部失效

实例 

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

总结

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

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

您可能感兴趣的文章:
阅读全文