vue__组件自定义事件绑定、解绑、触发自定义事件、父子组件之间通信

我就是我 2024-04-05 07:10 90阅读 0赞

**目录**

总结：

组件的自定义事件

1.一种组件间通信的方式，

2.使用场景:

3.绑定自定义事件:

4.触发自定义事件:this.$emit('atguigu',数据)

5.解绑自定义事件 this.$off('atguigu')

6.组件上也可以绑定原生DOM事件，需要使用native修饰符

7.注意:通过this.$refs.xxx.$on('atguigu，回调)

一、组件自定义事件绑定

方式一

方式二

结果： 方式一和方式二的最终结果是一个样子的

二、组件自定义事件解绑

--------------------

##  ##

## 总结： ##

## 组件的自定义事件 ##

####    1.一种**组件间通信**的方式， ####

适用于:**子组件===>父组件**

#### 2.使用场景: ####

**A是父组件，B是子组件**，**B想给A传数据**，那么就要在**A中给B绑定自定义事件(事件的回调在A中**)。

#### 3.绑定自定义事件: ####

①第一种方式，

在父组件中:<Demo @ateuigu="test"/> 或<Demo y-on:atouigu="test"/>

②第二种方式，在父组件中:  
<Demo ref="demo"/>  
.....  
mounted()\{  
this.$refs.xxx.$on('atguigu',this.test)\}

![fc63ede3257445248f18beb6ede4b5f2.png][]

![ef0523f9704b4e82843bd4f2e91b6ca9.png][]

③若想让自定义事件只能触发一次，

可以使用once修饰符，或$once方法。

this.$refs.student.$once('atguigu',this.getStudentName)

#### 4.触发自定义事件:this.$emit('atguigu',数据) ####

![aa8909a927b04087b491a61ba71df499.png][]

#### 5.解绑自定义事件 this.$off('atguigu') ####

![a806dceba9a842b7ad5246831df3b2c4.png][]

#### 6.组件上也可以绑定原生DOM事件，需要使用native修饰符 ####

![beba999a9d034e3ea188adc5cc41259d.png][]

####    7.注意:通过this.$refs.xxx.$on('atguigu，回调) ####

绑定自定义事件时，回调要么配置在methods中，要么用箭头函数，否则this指向会出问题!

![7736b0688c32443d8215474988c0f761.png][]

## 一、组件自定义事件绑定 ##

### 方式一 ###

**app.vue**

<template>
      <div class="app">
        <h1>{
       {msg}}</h1>
    
        
        
        <Student  v-on:atguigu="getStudentName"></Student>
    
    
      </div>
    
    </template>
    
    <script>
         // 引入组件
         import School  from './components/School' 
         import Student  from './components/Student'
    
    
    
    
         export default {
           name:'App',
           data(){
             return{
              msg:'你好啊！'
             }
           },
          //  注册组件
           components:{
             School,
             Student,
           },
           methods:{
    
            // 不论传过来多少个参数，第一个参数赋值给name，剩下的参数在params数组中
            getStudentName(name,...params){
              console.log('App收到了学生名',name)
            }
           },
    
    
    </script>
    
    <style scoped>
        .app{
          background-color:gray ;
          padding: 5px;
        }
    </style>

**student.vue**

<template>
    
         
         <div class="student">
            <h2 > 学生名称：{
       {name}}</h2>
            <h2> 学生年龄：{
       {age}}</h2>
            <h2> 学生性别：{
       {sex}}</h2>
            <button @click="sendStudentName">把学生的名字给App</button>
          
         </div>
    </template>
    
     <script>
    
            export default {
                name:'Student',
    
                data(){
                    return{
                     name:'张三',
                     sex:'男',
                     age:18
                    }
                },
                methods:{
                    // 触发Student组件身上的atguigu事件
                    sendStudentName(){
                        // 这里的this指向vc
                        // emit 爆发的含义
                        // 注意！！这个地方要写事件名和传入的参数
                        this.$emit('atguigu',this.name)
                    }
                }
    
    
            }  
    </script>
    
    <style scoped>
          .student{
            background-color: red;
            padding:5px;
            margin-top:30px;
          }
    </style>

### 方式二 ###

<template>
      <div class="app">
        <h1>{
       {msg}}</h1>
    
        
        <Student ref="student"/>
      </div>
    
    </template>
    
    <script>
         // 引入组件
         import School  from './components/School' 
         import Student  from './components/Student'
    
    
    
    
         export default {
           name:'App',
           data(){
             return{
              msg:'你好啊！'
             }
           },
          //  注册组件
           components:{
             School,
             Student,
           },
           methods:{
            // 不论传过来多少个参数，第一个参数赋值给name，剩下的参数在params数组中
            getStudentName(name,...params){
              console.log('App收到了学生名',name)
            }
           },
    
          //  挂载完毕
           mounted(){
            // this.$refs.student获取真实的DOM元素
            // $on可以理解为当....时候  $on('atguigu')当atguigu事件被触发的时候
              this.$refs.student.$on('atguigu',this.getStudentName)
    
              // 下面这个只能触发一次
              // this.$refs.student.$once('atguigu',this.getStudentName)
           }
          }
    </script>
    
    <style scoped>
        .app{
          background-color:gray ;
          padding: 5px;
        }
    </style>

### **结果： 方式一和方式二的最终结果是一个样子的**  ###

![c12c53fd39764f13b3eb7762527693e1.png][]

## 二、组件自定义事件解绑 ##

<template>
    
         
         <div class="student">
            <h2 > 学生名称：{
       {name}}</h2>
            <h2> 学生年龄：{
       {age}}</h2>
            <h2> 学生性别：{
       {sex}}</h2>
            <button @click="sendStudentName">把学生的名字给App</button>
            <button @click="unbind">解绑atguigu事件</button>
          
         </div>
    </template>
    
     <script>
    
            export default {
                name:'Student',
    
                data(){
                    return{
                     name:'张三',
                     sex:'男',
                     age:18
                    }
                },
                methods:{
                    // 触发Student组件身上的atguigu事件
                    sendStudentName(){
                        // 这里的this指向vc
                        // emit 爆发的含义
                        // 注意！！这个地方要写事件名和传入的参数
                        this.$emit('atguigu',this.name)
                    },
                    unbind(){
                        // 这个语句只能解绑一个自定义事件
                        this.$off('atguigu')
                        //  this.$off(['atguigu','demo']) 解绑多个事件，有几个事件，就往里面写几个事件
                        // this.$off() 解绑所有的自定义事件
    
                    }
                }
    
    
            }  
    </script>
    
    <style scoped>
          .student{
            background-color: red;
            padding:5px;
            margin-top:30px;
          }
    </style>

![651bb1516b4d44a9a571d64c5f9faff3.png][]

**当我们解绑后，无论点多少次“把学生的名字给App”都不会管用**

[fc63ede3257445248f18beb6ede4b5f2.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/04/07bb1548d6424557b3c28d8b1c57e60f.png
[ef0523f9704b4e82843bd4f2e91b6ca9.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/04/75e1903f15d946148c08d336792244de.png
[aa8909a927b04087b491a61ba71df499.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/04/1a91008370f0496e976372c8cd05f8f6.png
[a806dceba9a842b7ad5246831df3b2c4.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/04/223fb65afbbf4d6fa3acc473631f9720.png
[beba999a9d034e3ea188adc5cc41259d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/04/53dbf378a91b4b7485cdd043cfc2edee.png
[7736b0688c32443d8215474988c0f761.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/04/cab240ba4c694a33be2b1162cf5f3879.png
[c12c53fd39764f13b3eb7762527693e1.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/04/18ee837109a345678f60f2a5249994b4.png
[651bb1516b4d44a9a571d64c5f9faff3.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/04/6cbc89430b584ce6b498e3e1f2ec8b6b.png