Vue学习第14天——vue自定义事件及详细代码演示

一、自定义事件

1、作用

组件间的一种通信方式

2、场景

子组件给父组件传递数据

3、 理解

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

4、原理

使用v-on绑定自定义事件，每个实例对象都实现了事件接口，即

使用 $on(eventName) 绑定事件（在父组件中绑定事件）
使用 $emit(eventName) 触发事件（子组件中触发事件）

二、案例练习

需求：通过button按钮实现School组件向父组件App传递学校名称

效果图

1、第一步绑定事件（父组件App中）

① 方法一：使用@

在父组件中：<School @schoolName="getName"/>或<School v-on:schoolName="getName"/>

代码如下

<template>
  <div>
    <h3>学校的名称是：{{name}}</h3>
    <!-- 自定义事件名为schoolName,getName为自定义事件的回调函数 -->
    <School @schoolName="getName"/>
  </div>
</template>

<script>
import School from "./components/School.vue"
export default {
  name:"App",
  data(){
    return {
      name:"",
    }
  },
  components:{School},
  methods:{
  	//自定义事件的回调函数
    getName(name){
      this.name=name
    }
  }
}
</script>

② 方法二：使用ref

在父组件中：
<School ref="demo"/>
…
mounted(){ this.$refs.demo.$on("schoolName件",getName) }

代码如下

<template>
  <div>
       <h3> 学校的名称是：{{name}}</h3>
       <!-- 通过ref获取子组件实例对象 -->
       <School ref="demo"/>
  </div>
</template>

<script>
import School from "./components/School.vue"
export default {
  name:"App",
  data(){
    return {
      name:"",
    }
  },
  components: { School },
  methods:{
  	//自定义事件的回调函数
    getName(name){
      this.name=name
    }
  },
  mounted(){
    //当自定义事件schoolName被调用的时候，执行getName函数
    this.$refs.schoolName.$on("schoolName",this.getName)
  }
}
</script>

若想要事件只触发一次，可以使用once修饰符，或者$once方法

this.$refs.schoolName.$once("schoolName",this.getName)

2、第二步触发事件（子组件School中）

给哪个子组件绑定的事件，找哪个子组件触发自定义事件

触发事件：this.$emit("自定义事件",数据)

<template>
    <div>
        <p>学校名称:{{name}}</p>
         <p>学校地址:{{adress}}</p>
         <button @click="sendName">通过自定义事件实现子传递数据</button>
    </div>
</template>

<script>
export default {
    name:"School",
    data(){
        return {
            name:"喵喵学院",
            adress:"郑州"
        }
    },
    methods:{
    	//给谁绑定的自定义事件，找谁触发事件
        sendName(){
            this.$emit("schoolName",this.name)
        }
    }
}
</script>

三、总结

1、绑定事件

① 方法一：在父组件中

<School @自定义事件="回调函数"/>或<School v-on:自定义事件="回调函数"/>

② 方法二：在父组件中

<School ref="XXX"/>
…
mounted(){ this.$refs.XXX.$on("自定义事件",回调函数) }

2、触发事件

this.$emit("自定义事件",数据)

3、解绑事件

给谁绑定的自定义事件，找谁解绑
单个解绑：this.$off("自定义事件")
解绑多个自定义事件：this.$off(["xxx1","xxx2"])
全部解绑：this.$off()（解绑不影响原生DOM事件）
补充：还可以通过$destroy实现自定义事件解绑：this.$destroy()（销毁组件）

<template>
    <div>
        <p>学校名称:{{name}}</p>
         <p>学校地址:{{adress}}</p>
         <button @click="sendName">通过自定义事件实现子给父传递数据</button>
         <button @click="add">点击number的值为——{{number}}</button>
         <button @click="offName">$off解绑自定义事件</button>
         <button @click="destroyName">$destroy实现解绑自定义事件</button>
    </div>
</template>

<script>
export default {
    name:"School",
    data(){
        return {
            name:"喵喵学院",
            adress:"郑州",
            number:0
        }
    },
    methods:{
        //通过自定义事件实现子给父传递数据
        sendName(){
            this.$emit("schoolName",this.name)
        },
        //原生DOM点击事件
         add(){
            this.number++;
            console.log('原生DOM事件被调用');
        },
        //通过$off实现解绑自定义事件
        offName(){
            this.$off()
        },
        //通过$destroy实现解绑自定义事件
        destroyName(){
            this.$destroy();
        },
    },
}
</script>

4、组件绑定原生DOM事件

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

<School @click.native="showName">

5、注意事项

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