Vue笔记组件的自定义事件

最新推荐文章于 2024-11-04 19:08:00 发布

翘阳啦

最新推荐文章于 2024-11-04 19:08:00 发布

阅读量335

点赞数

分类专栏： Vue 文章标签：前端 javascript vue.js

本文链接：https://blog.csdn.net/qiaoyangla/article/details/123983548

版权

本文详细介绍了Vue中组件的自定义事件，包括如何给组件绑定和解绑自定义事件，以及$emit的使用。重点阐述了自定义事件作为子组件向父组件通信的一种方式，提供了多种绑定和触发事件的方法，并提到了注意事项，如使用$once和处理this指向问题。

摘要由CSDN通过智能技术生成

给一个组件绑定自定义事件

用props, $emit，ref

实例如下：

App组件：

<template>
    <div>
      <h1>{
  {msg}}</h1>
      <!--通过父组件给子组件传递函数类型的props  实现：子给父传递数据-->
      <School :getSchoolName="getSchoolName"/>

      <!--通过父组件给子组件绑定一个自定义事件  实现：子给父传递数据（第一种写法，使用@或v-on）-->
      <Student v-on:zlg="getStudentName"/>  
      
      <!--通过父组件给子组件绑定一个自定义事件  实现：子给父传递数据（第二种写法，使用ref）-->
      <Student ref="student"/>  

      
    
    </div>
</template>
 
<script>
    //引入组件
    import Student from './Student'     
    import School from './School'  

    export default{
       name:'App',
       components:{
          Student,
          Schoo