Vue组件自定义事件

JS本身自带的click、keyup、mouseout等等都是内置事件。都是给html元素使用的。

自定义事件是给组件使用的，适用于子组件给父组件传递数据。

子组件给父组件传递数据的2种方式：

第一种方式：通过props

第二种方式：通过自定义事件

通过props实现子组件给父组件传递数据

实现步骤：

1. 首先在父组件APP的methods里面定义一个函数（需要接收一个参数），给子组件标签绑定这个函数
2. 在子组件通过props声明接收这个函数，定义click一个事件
3. 在子组件的methods里面书写事件函数，通过this.函数名括号传数据

代码示例：

APP组件代码：

    //给子组件绑定函数  
    

    //定义一个接收参数的函数
    methods: {
        getSchoolName(name){
        console.log('app收到了学校名',name)
        }
    }

子组件代码：

  //定义一个click事件
  把学校名字给app

  //声明接收父组件函数
  props:['getSchoolName'],

  //调用事件函数并传参
  methods: {
    sendSchoolName(){
      this.getSchoolName(this.name)
    }
  }

通过自定义事件实现子组件给父组件传递数据

绑定自定义事件的两种方式：使用v-on或者使用ref

v-on绑定

实现步骤：

1. 首先给子组件标签通过v-on：自定义事件名字="函数名"，绑定一个函数，接着在父组件APP的methods里面定义这个函数（需要接收一个参数）
2. 在子组件中，首先定义一个click事件，接着在methods内书写click事件函数，在其内部通过$this.$emit（）去触发APP组件里面的自定义事件，括号内的第一个参数是自定义事件名字，后面的参数是数据，（注意：给哪个子组件绑定自定义事件就去哪个子组件去触发这个事件）
3. 在子组件的methods里面定义触发这个函数的函数，通过this.函数名括号传数据

代码示例：

APP组件代码：

    //给子组件绑定函数  
    

    //定义一个接收参数的函数
    methods: {
        incident(name){
        console.log('app收到了学生名',name)
        }
    }

子组件代码：

  //定义一个click事件
  把学生名字给app

  //调用事件函数，通过$this.$emit()去触发APP组件里面的自定义事件
  methods: {
     sendStudentName(){
       this.$emit('self',this.name)
     }
  }

ref绑定

实现步骤：

1. 首先在父组件中给子组件标签使用ref绑定让我们可以获得组件的实例对象。
2. 在父组件中，添加配置项mounted（），里面使用this.$refs.实例对象.$on('自定义属性名'，this.接收数据的函数名)
3. 在子组件里面的代码不改变

代码示例：

APP组件代码：

    //给子组件绑定函数  
    

    //定义一个接收参数的函数
    methods: {
        incident(name){
        console.log('app收到了学生名',name)
        }
    }

    //绑定自定义事件
    mounted() {
      this.$refs.student.$on('self',this.incident)
    }

子组件代码：

  //定义一个click事件
  把学生名字给app

  //调用事件函数，通过$this.$emit()去触发APP组件里面的自定义事件
  methods: {
     sendStudentName(){
       this.$emit('self',this.name)
     }
  }

解绑自定义事件

• 解绑一个自定义事件：this.$off('自定义事件名')
• 解绑多个自定义事件：this.$off(['自定义事件名1','自定义事件名2'])
• 解绑所有的自定义事件：this.$off()

---

注意

• 通过this.$refs.xxx.$on('自定义事件名',回调)绑定自定义事件时，回调要么配置在methods中，要么用箭头函数，否则this指向会出问题！
• 组件上也可以绑定原生DOM事件，需要使用native修饰符。
• 若想让自定义事件只能触发一次，可以使用once修饰符，或$once方法。