自定义事件

自定义事件 是给组件使用的

1.一种组件间通信的方式，适用于:子组件 ===>父组件
2.使用场景:A是父组件，B是子组件，B想给A传数据，那么就要在A中给B绑定自定义事件(事件的回调在A中)

<template>
  <div class="app">
    <h1>{{msg}},姓名是:{{studentName}}</h1>
    <!-- 通过父组件给子组件传递函数类型的props实现子给父传递数据 -->
    <School :getSchoolName="getSchoolName"></School>
    <hr>
    <!-- 通过父组件给子组件绑定一个自定义事件 实现子给父传递数据
     在子组件Student标签上 所以组件的实例对象vc身上绑定了事件 名为dxdd  -->
    <!-- <Student @dxdd="getStudentName" @demo="m1"></Student> -->
    <!-- 第三种方式 ref=''灵活性强 异步再执行的时候-->
        <Student ref="student" @click="show"></Student>
  </div>
</template>

<script>
// 引入组件 汇总所有需要的组件 这个是模块化的引入
import School from "./components/School";
import Student from './components/Student.vue';
export default {
  name: "App",
  data() { 
    return {
      msg:'哈IIEUJI我欧文1',
      studentName:''
    };
  },
  //   注册组件
  components: {
    School,
    Student, 
  },
  methods:{
    getSchoolName(name){
      console.log('App收到了',name);
    },
    // 当传递参数多 methods中的函数 this指向当前的组件实例对象 如果冲突 以当前App组件实例对象
    //
    getStudentName(name,...params){
      console.log('App收到了',name,params);
      this.studentName = name
    },
    m1(){
      console.log('demo被调用了',);
    },
    show(){
      alert('123')
    }
  },
  // 使用ref自定义事件
  // mounted(){
  //   // setTimeout(()=>{
  //   //     this.$refs.student.$on('dxdd',this.getStudentName)//延迟5秒
  //   // },5000)
  //    this.$refs.student.$on('dxdd',this.getStudentName)
  // }
  //  mounted(){
  //    //如果把回调放到第二个参数时 this指向被绑定事件的组件实例对象 谁触发了事件 this就指向Student(vc)
  //    this.$refs.student.$on('dxdd',function(name,...params){
  //      console.log('App收到了名字',name,params);
  //      console.log(this);
  //    })
  // },
   mounted(){
     //this.getStudentName改变了指向 指向App(vc) getStudentName作为回调函数写在父组件中
     this.$refs.student.$on('dxdd',this.getStudentName)
  }

};
</script>

<style >
.app{
  background-color: gray;
}
</style>

在子组件Student中

<template>
  <div class="student">
    <h2>学生姓名:{{ name }}</h2>
    <h2>学生性别:{{ sex }}</h2>
    <h2>当前求和为：{{number}}</h2>
    <button @click="add">点我number++</button>
   <button @click="sendStudentName">把名字给App</button>
   <button @click="unbind">解绑dxdd事件</button>
   <!-- 一个组件如果被销毁了 那么他身上的自定义事件也不奏效了 -->
   <button @click="death">销毁Student组件实例(vc)</button>
  </div>
</template>

<script>
export default {
  name: "Student",
  data() {
    return {
      name:"道道道 天下道",
      sex:24,
      number:0
    };
  },
  methods:{
    add(){
      console.log('add回调被调用了');
      this.number++
    },
    sendStudentName(){
      // 拿到组件实例对象身上的dxdd事件 此时的事件也可以传给App(使用钩子时挂载完成之后)
      this.$emit('dxdd',this.name,555,6666)
      this.$emit('click')//此时的click事件会被作为自定义事件处理

    },
    unbind(){
         this.$off('dxdd')//解绑一个自定义事件
      // this.$off(['dxdd','demo'])//解绑多个自定义事件
      // this.$off()//解绑所有的自定义事件(比较暴力)
    },
    death(){
      this.$destroy()//销毁Student组件实例(vc) 销毁后身上的自定义事件也不奏效了 原生的不受影响
    }
  }
 
};
</script>
 
<style  >
</style>

自定义事件 是给组件使用的

3.绑定自定义事件:
1.第一种方式:在父组件中：<Demo @dxdd=‘test’>或
2.第二种方式:在父组件中:

…
mounted(){
this.$refs.xxx.$on(‘dxdd’,this.test)//this.test调回调函数
}
3.若想让自定义事件只能触发一次 可以使用once修饰符 或$once方法4.触发自定义事件:this.$emit(‘事件名’,数据)
5.解绑自定义事件this.$off{(}^{\prime }事件{名}^{\prime })6.组件上也可以绑定原生DOM事件需要使用native修饰符7.注意：通过this.$refs.xxx.$on(‘事件名’,回调)绑定自定义事件时 回调要么配置在methods中 要么用箭头函数 否则this指向会出问题