Vue技术—组件自定义事件

总结

1.一种组件间通信的方式，适用于：子组件 ===> 父组件

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

3.绑定自定义事件：
        （1）.第一种方式，在父组件中：<Demo @atguigu="text"/>或<Demo v-on:atguigu="text"/>
        （2）.第二种方式，在父组件中：

<Demo ref="demo"/>
......
mounted(){
	this.$refs.xxx.$on('atguigu',this.test)
}

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

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

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

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

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

自定义事件绑定与解绑

— App.vue

<template>
  <div>
    <!-- 第一种绑定写法 -->
    <School @checkSchoolName.once="checkSchoolName" @checkSchoolAdd="checkSchoolAdd"></School>
    <!-- 第二种绑定写法 -->
    <!--<School ref="school"></School>-->
    <hr>
    <Students></Students>
  </div>
</template>

<script>
import School from "./components/School";
import Students from "./components/Students";

export default {
  name:"App",
  components:{
    School,
    Students
  },
  methods:{
    checkSchoolName(a,...params){
      console.log("更改了学校姓名",a,params)
    },
    checkSchoolAdd(){
      console.log("更改了学校地址")
    }
  },
  mounted(){
    // this.$refs.school.$once('checkSchoolName',this.checkSchoolName)
    /*this.$refs.school.$once('checkSchoolName',(a,...params)=>{
      console.log("更改了学校姓名",a,params)
    })*/
  }
}
</script>

— School.vue

<template>
  <div>
    <h2>学校名称：{{name}}</h2>
    <h2>学校地址：{{address}}</h2>
    <h2>{{number}}</h2>
    <button @click="button">更改学校姓名</button>
    <button @click="unbind">解绑事件</button>
    <button @click="add">number++</button>
    <button @click="deathvc">销毁vc</button>
  </div>
</template>

<script>
export default {
  name:"School",
  data(){
    return {
      name:"某某学校",
      address:"天津市××××××",
      number:1
    }
  },
  methods:{
    add(){
      this.number++
    },
    button(){
      //触发School组件实例对象的自定义绑定事件
      this.$emit('checkSchoolName',111,222,333,444)
      this.$emit('checkSchoolAdd')
    },
    unbind(){
      /*解绑一个事件*/
      this.$off('checkSchoolName')
      /*解绑多个事件*/
      //this.$off(['checkSchoolName','checkSchoolAdd'])
      /*解绑所有事件*/
      //this.$off()
    },
    deathvc(){
      this.$destroy()
      console.log(this.number);
    }
  }
}
</script>