21-绑定自定义事件

绑定自定义事件

一、利用自定义事件获取子组件的值

父组件给子组件绑定一个自定义事件，实际上是绑定到了子组件的实例对象vc上：

<!-- 自定义myEvent事件 -->
<Student v-on:myEvent='getStudentName'/>

在父组件中编写getStudentName的实现：

getStudentName(name) {
    console.log(`学生名称是：${name}`)
}

在子组件Student中利用$emit触发组件实例对象上的事件

<template>
  <div class="student">
      <h2>学生姓名:{{name}}</h2>
      <h2>学生年龄：{{age}}</h2>
      <button @click="sendStudentName">把学生名给app</button>
  </div>
</template>

<script>
export default {
    name: 'Student',
    data() {
        return {
            name:'张三',
            age:18
        }
    },
    methods: {
        sendStudentName() {
            // 触发Student组件实例身上的myEvent事件
            this.$emit('myEvent', this.name)  // 因为事件时绑定在Student的实例对象上的，所以可以直接通过this进行触发
        }
    },
}
</script>

自定义事件可以像普通事件一样使用简写形式:

<Student @myEvent='getStudentName'/>

父组件中给子组件实例对象绑定自定义事件的另一种写法：

<template>
  <div id="app" class="app">
      
    <!-- 绑定自定义事件第二种写法，在子组件上添加ref，使得父组件可以获取到Student子组件的实例对象 -->
    <Student ref='student'/>
  </div>
</template>

<script>
import Student from './components/Student'
import School from './components/School'

export default {
  name: 'App',
  components: {
    Student, School
  },
  methods: {
    getStudentName(name) {
      console.log(`学生名称是：${name}`)
    }
  },
  mounted() {
    
    // 使用this.$refs.student获取到Student组件实例对象
    // 使用 $on 为组件实例对象绑定自定义事件myEvent
    // 使用该方式会更加灵活，比如在模板加载3秒后再绑定事件，就可以在这里加定时器
    this.$refs.student.$on('myEvent', this.getStudentName)
  },
}
</script>

如果想让绑定的事件只触发一次，两种写法：

第一种写法：

<Student @myEvent.once='getStudentName'/>

第二种写法：

this.$refs.student.$once('myEvent', this.getStudentName)

绑定的事件函数可以传递多个值：

getStudentName(name,a,b,c) {
    console.log(`学生名称是：${name}`)
}

触发事件时也传入多个值即可：

this.$emit('myEvent', this.name, 1, 2, 3)

二、解绑自定义事件

在子组件使用使用$off解绑自定义事件：

this.$off('myEvent')  // 解绑一个自定义事件

解绑多个自定义事件：需要传如一个数组

this.$off(['myEvent', 'myEvent2']) // 解绑多个

解绑所有自定义事件：

this.$off()  // 解绑所有自定义事件

当组件实例被销毁时，实例上的所有自定义事件全都失效。

this.$destroy();

三、自定义事件回调函数的this

第一种情况：

在methods中定义回调函数，在绑定事件时填写回调函数名称。因为methods中的回调函数的this指向的是当前组件，所以此处指向的是当前组件。

export default {
  name: 'App',
  components: { Student},
  data() {
    return {
      name: ''
    }
  },  
  methods: {
    getStudentName(name) {
      console.log(`学生名称是：${name}`)
      this.name = name;   // 这里的this指向的是当前组件
    }
  },
  mounted() {
    this.$refs.student.$on('myEvent', this.getStudentName)  // 在methods中定义回调函数，此处只写回调函数名称
  },
}

第二种情况：

直接在绑定自定义事件时定义回调函数，此时回调函数体内的this指向的是触发该自定义事件的子组件。

export default {
  name: 'App',
  components: { Student},
  data() {
    return {
      name: ''
    }
  },  
  mounted() {
    // 直接在绑定自定义事件时定义回调函数，且回调函数不是箭头函数
    this.$refs.student.$on('myEvent', function (name){
      console.log(`学生名称是：${name}`)
      this.name = name;   // 这里的this指向的是触发该事件的子组件
    })  
  },
}

第三种情况：

直接在绑定自定义事件时定义回调函数，回调函数使用箭头函数写法。

原本此处的函数体内的this应该指向触发该自定义事件的子组件，但是因为箭头函数没有this，所以向外找到了mounted的this，即指向了当前组件

export default {
  name: 'App',
  components: { Student},
  data() {
    return {
      name: ''
    }
  },  
  mounted() {
    // 直接在绑定自定义事件时定义回调函数，回调函数使用箭头函数写法
    this.$refs.student.$on('myEvent', name => {
      console.log(`学生名称是：${name}`)
      this.name = name;   // 这里的this指向的当前组件
    })  
  },
}

四、组件上使用原生事件

在组件上直接使用原生事件时，默认也会被当做自定义事件：

<!-- vue会将组件上的click也当做自定义事件 -->
<Student @click='getStudentName'/>

此时，vue会将Student组件上的click事件也当做自定义事件，需要在Student组件中使用$emit触发才能使用。

如果要在组件上声明这个事件时一个原生事件，需要使用修饰符：

<!-- 使用native修饰符声明这是一个原生事件 -->
<Student @click.native='getStudentName'/>

先赞后看，养成习惯！！！^ _ ^ ❤️ ❤️ ❤️
码字不易，大家的支持就是我的坚持下去的动力。点赞后不要忘了关注我哦！