Vue (12) — 组件的自定义事件_this.$refs.student.$on('fruit',this.getstudentname

目录

一、什么是组件的自定义事件

二、使用场景

三、绑定自定义事件

  1.第一种方式

  2.第二种方式

  3.备注

四、触发自定义事件

五、解绑自定义事件

六、绑定原生DOM事件

七、注意

---

一、什么是组件的自定义事件

        组件的自定义事件是一种组件间通信方式，它适用于：子组件 ==> 父组件

二、使用场景

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

三、绑定自定义事件

  1.第一种方式

        在父组件中：

            <Demo @someway="test"/> 或 <Demo v-on:someway="test"/>

        案例：

在父组件中绑定一个自定义事件如下： 

<Student v-on:someway="getStudentName" @demo="m1"/>

在父组件的methods当中配置如下：

getStudentName(name,...params) {
      console.log("App收到了学生名：", name,params);
      this.studentName = name
    },

在子组件中绑定事件如下：

<button @click="sendStudentName">把学生名给app</button>

在子组件的methods当中配置如下：

sendStudentName(){
            //触发Student组件实例身上的‘someway’事件
            this.$emit('someway',this.name,222,111,333)
        },

 

  2.第二种方式

        在父组件中：

    <Demo ref="demo"/>

    ......

    mounted(){

        this.$refs.xxx.$on('someway',this.test)

    }

        案例：

在父组件中绑定一个自定义事件如下：

<Student ref="student" @click.native="show"/>

 在父组件中配置生命周期函数如下：

mounted() {
    //等待三秒钟后，获取实例对象并添加someway事件
    // setTimeout(()=>{
    //   this.$refs.student.$on('someway',this.getStudentName)
    //     },3000)
 
    //绑定自定义事件，触发一次之后就不能触发
    // this.$refs.student.$once('someway',this.getStudentName)
 
    this.$refs.student.$on('someway',this.getStudentName)
  },

在子组件中绑定事件如下：

<button @click="sendStudentName">把学生名给app</button>

在子组件的methods当中配置如下：

sendStudentName(){
            //触发Student组件实例身上的‘someway’事件
            this.$emit('someway',this.name,222,111,333)
        },

 

  3.备注

        若想让自定义事件只能触发一次，可以使用 once 修饰符，或 $once 方法

四、触发自定义事件

         使用：       this.$emit('someway',数据)

 

案例：

在子组件中绑定事件如下：

<button @click="sendStudentName">把学生名给app</button>

在子组件的methods当中配置如下：

sendStudentName(){
            //触发Student组件实例身上的‘someway’事件
            this.$emit('someway',this.name,222,111,333)
        },

五、解绑自定义事件

         使用：       this.$off('someway')

 

案例： 

在子组件中绑定事件如下：

<button @click="unbind">解绑someway事件</button>

在子组件methods当中配置如下：

unbind(){
            this.$off('someway')//解绑一个自定义事件
            // this.$off(['someway','demo'])//解绑多个自定义事件
            // this.$off()//解绑所有自定义事件
        },

 

六、绑定原生DOM事件

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

案例如下：

<Student ref="student" @click.native="show"/>

 

七、注意

        通过this.$refs.xxx.$on('someway',回调)绑定自定义事件时，回调要么配置在methods中，要么用箭头函数，否则this指向会出问题！！！