80、组件自定义事件——绑定

组件的事件绑定类似vue实例的自定义事件，父组件定义一个方法，传递给子组件。子组件能够通过该绑定事件传回数据。

1. 使用@或on的方式（类似使用注解方式）

  <!-- 通过父组件给子组件传递函数类型的props实现：子给父传递数据 -->
  <School :getSchoolName="getSchoolName"/>
  <!-- 通过父组件给子组件绑定一个自定义事件实现：子给父传递数据（第一种写法：使用@或on） -->
  <Student v-on:atguigu="getStudentName"/>
  ···
  methods: {
    getSchoolName(name){
      console.log("App收到了学校名：",name);
    },
    getStudentName(name,...params){
      // a是个数组
      console.log("App收到了学生名：",name,params);
    },
    m1(){
      console.log("demo事件被触发了");
    }
  },

2. 使用ref方式（类似使用代码的方式，更灵活）

  <!-- 通过父组件给子组件绑定一个自定义事件实现：子给父传递数据（第二种写法:使用ref） -->
  <Student ref="student"/>
  
  ···
  methods: {
    getSchoolName(name){
      console.log("App收到了学校名：",name);
    },
    // 使用es6的方式，传数组，不确定参数个数
    getStudentName(name,...params){
      // a是个数组
      console.log("App收到了学生名：",name,params);
    },
    m1(){
      console.log("demo事件被触发了");
    }
  },
  mounted() {
    // ref更加灵活
    setTimeout(()=>{
      // 绑定自定义事件
      // this.$refs.student.$on("atguigu",this.getStudentName) 
      // 只能触发一次
      this.$refs.student.$once("atguigu",this.getStudentName)
    },3000)
  },
  ···    

3. 子组件触发事件

···
  // 触发Student组件实例身上的atguigu事件
  this.$emit('atguigu',this.name,111,222,333),
  this.$emit('demo')
···

81、组件自定义事件——解绑

有两种解绑方式，一种是vue实例或组件生命周期结束的时候，组件身上的绑定事件以及子组件都会失活；另一种是手动解绑组件自定义事件。

1. 生命周期结束

生命周期结束后无法再使用绑定事件，即使是@clickjs原生事件也会跟着解绑。

···
  mounted(){
    this.$destroy();
  }

2. 手动解绑组件自定义事件

  ···
  this.$off('atguigu') // 解绑一个自定义事件
  this.$off(['atguigu','demo']) //解绑多个自定义事件
  this.$off() // 暴力解绑 解绑所有的自定义事件
  ···