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

目录

总结：

   组件的自定义事件

       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.绑定自定义事件:

           ①第一种方式，

                在父组件中: 或

 
           ②第二种方式，在父组件中:
              
                        .....
                mounted(){
                this.$refs.xxx.$on('atguigu',this.test)}

 

 

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

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

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

 

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

   

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

    

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

 

 

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

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

 

一、组件自定义事件绑定

       方式一

           app.vue

student.vue

       方式二

 

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

二、组件自定义事件解绑

 

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