Vue-组件自定义事件

test(name, …params) {…}

}

mounted() {

this.$refs.demo.$on(‘atguigu’,this.test)

}

子组件触发自定义事件

---

this.$emit(‘atguigu’,this.name, this.sex, 800)

// 子组件触发自定义事件的时候可以传递多个参数

解绑自定义事件

---

❤️   解绑一个自定义事件：this.$off(‘atguigu’)

❤️   解绑多个自定义事件：this.$off([‘atguigu’, ‘demo’])

❤️   解绑所有的自定义事件：this.$off()

组件上也可以绑定原生DOM事件，需要使用native修饰符

---

<Student ref = “student” @click.native=“show”>

注意事项：

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

完整案例

App.vue父组件

{{ atguigu }}-{{studentname}}

<Student ref=“student” @click.native=“show” />

Student.vue子组件

学生名称：{{ name }}

学生性别：{{ sex }}

number: {{ number }}

<button @click=“add”>点我number子加

<button @click=“sendStudentName”>点我获得学生的姓名

<button @click=“unbind”>解绑atguigu事件

<button @click=“dath”>点我摧毁Student组件的饿实例对象vc