Vue组件—自定义事件

最新推荐文章于 2025-07-24 12:45:09 发布

原创最新推荐文章于 2025-07-24 12:45:09 发布 · 390 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

Vue基础系列

本文介绍了Vue自定义事件的概念，强调了其相对于浏览器原生事件的灵活性，如事件名和触发时机的自定义。讲解了如何通过组件标签绑定和$ref绑定来使用自定义事件，以及在子组件向父组件传递信息的应用场景。同时，文章提醒读者注意解绑自定义事件的重要性，并推荐使用Chrome的Vue开发者工具辅助调试。

什么是自定义

事件？

复习浏览器事件

该章节主要为Vue组件—自定义事件的学习，对浏览器原生事件仅作简短复习说明

定义

理解为一种信号，当浏览器捕获到该信号时执行特定的 处理程序；

这种处理程序也就是 事件的回调函数。
当用户进行某些行为操作时，运行某 JS代码的的方式。

分类

鼠标事件
键盘事件
表单事件
…

定义事件处理程序的几种方式

HTML 特性

<input value="Click me" onclick="alert('点我呀!')" type="button">

DOM 属性

<input type="button" onclick="countRabbits()" value="Count rabbits!">
<script>
  function countRabbits() {
    for(let i=1; i<=3; i++) {
      alert("Rabbit number " + i);
    }
  }
</script>

回调函数中 this

this指向触发该事件的元素

setAttribute定义事件产生的问题

// 点击 <body> 将产生 error，
// 因为特性总是字符串的，函数变成了一个字符串
document.body.setAttribute('onclick', function() { alert(1) });

Vue自定义事件

自定事件的特点

事件名自定义
触发事件的时机自定义

绑定自定义事件的方式

组件标签绑定

 <School>
      :getStudents="getStudents"
      @getTeacherAmount="getTeacherAmount"
 </School>

$ref绑定

  
  <Student :students="students" ref="student"></Student>
  ....
  mounted() {
    // 为组件绑定自定义事件,
    this.$refs.student.$on("showbubu", this.showbubu);
  },

比较标签绑定 $ref绑定

通过$ref可以实现动态绑定

自定义事件能做什么？

子组件向父组件传递信息

如何使用自定义事件？

接收信息的组件

定义事件的回调函数
回调函数的参数为传递信息

发布信息的组件

触发事件


<ul v-for="student in students" :key="student.id">
      <li>
        <div>姓名:{{ student.name }}</div>
        <button @click="confirmInfo(student.name)">找到布布</button>
      </li>
    </ul>
  
  methods: {
    confirmInfo(name) {
   //触发事件
      this.$emit('showbubu',name)// name: 传递的信息
  },

使用自定义事件注意事项

解绑自定义事件

this.$off('showbubu')//解绑单个事件
this.$off(['event1','event2'])//解绑多个
this.$off()//解绑所有事件

小tips

使用chrome中 vue开发者工具更清晰查看自定义事件操作

标签

#vue.js #javascript #前端 #前端框架