组件自定义事件_绑定
JS中有内置事件比如click，keyup。内置事件是给标签使用的，而自定义事件是给组件使用的。
子组件给父组件传递数据有两种方式
App父组件，School和Student是子组件。
子组件给父组件传递函数类型的props实现：子给父传递数据
在App中给School组件单项数据绑定getSchoolName，methods里面写getSchoolName（name），形参接收name,将方法传给School组件;
<School :getSchoolName="getSchoolName" />
methods: {
getSchoolName(name) {
console.log('App收到了学校名', name)
}
}再在School组件当中接收数据
<button @click="sendSchoolName">把学校名给App</button>
methods: {
sendSchoolName() {
this.getSchoolName(this.name)
}
}现在使用第二种方法将学生名传给App。
通过父组件给子组件绑定一个自定义事件实现子给父传递数据(@或者v-on)
给Student组件的实例对象（vc）绑定了testa事件
<Student v-on:testa="getStudentName" />methods方法
getStudentName(name) {
console.log('demo被调用了！', name)
}Student中定义click事件
<button @click="sendStudentName">把学生名传给App</button>在Student的方法中定义click事件调用App的自定义事件testa（getStudentName方法传给了testa）
methods: {
sendStudentName() {
//触发Student组件实例身上的testa对象
this.$emit('testa', this.name)
}
}通过父组件给子组件绑定一个自定义事件实现子给父传递数据(ref)
在App中
<Student ref="student" />this. r e f s . s t u d e n t 是 S t u d e n t 的实例对象，可以绑定事件， refs.student是Student的实例对象，可以绑定事件， refs.student是Student的实例对象，可以绑定事件，on当testa被触发执行回调getStudentName；这种写法的好处是灵活性很好。比如等3s给Student实例绑定对象
mounted() {
setTimeout(() => {
this.$refs.student.$on('testa', this.getStudentName)
}, 3000)
},思考小问题，如果只触发一次testa怎么设置
方法三将on改成once ``` this.refs.student.once('testa', this.getStudentName) ``` 方法2添加.once ```
开发技巧
如果开发中参数很多，可以使用ES6中的一种方法来接受参数
ES6 引入 rest 参数（形式为 ...变量名 ），用于获取函数的多余参数，这样就不 需要使用 arguments 对象了。rest 参数搭配的变量是一个数组，该变量将多余的 参数放入数组中。
getStudentName(name, ...params) {
console.log('demo被调用了！', name.params)
}name接收一个参数，...params接收其余所有参数。
组件自定义事件_解绑
给谁绑定了自定义事件就给谁解绑。
在Student组件页面中给按钮设置解绑事件。
<button @click="unbind">解绑testa事件</button>解绑一个自定义事件。
unbind() {
this.$off('testa')
}解绑两个自定义事件
this.$off(['testa', 'demo'])解绑所有的自定义事件
this.$off()vm销毁的之后会移除所有的watchers 子组件和自定义事件,所以也可以直接销毁当前组件的实例，销毁后实例的所有的自定义事件失效
<button @click="destroyed">销毁当前组件的实例</button>
destroyed() {
this.$destroy()
}总结
- 组件的自定义事件适用于子组件给父组件传输数据
- 使用场景：A是父组件，B是子组件，B想给A传数据，就要在A中给B绑定自定义事件(事件回调在A中)
- 绑定自定义事件：
(1).父组件中 <Demo @test="abc"/>或<Demo @test="abc"/>
(2).父组件中
......
mounted(){
this. r e f s . x x x . refs.xxx. refs.xxx.on('test',this.abc)
}
(3).如果想要让自定义事件只能触发一次，可以使用once修饰符，或者$once方法。 - 触发自定义事件 this.$emit('test',数据)
- 解绑自定义事件 this.$off('test')
- 组件上也可以绑定原生Dom事件，需要使用native修饰符
- 注意：通过this. r e f s . x x x . refs.xxx. refs.xxx.on('test',回调)绑定自定义事件时，回调配置在methods中，或者是用箭头函数，否则会出现this指向问题。
义事件 this.$off('test') - 组件上也可以绑定原生Dom事件，需要使用native修饰符
- 注意：通过this. r e f s . x x x . refs.xxx. refs.xxx.on('test',回调)绑定自定义事件时，回调配置在methods中，或者是用箭头函数，否则会出现this指向问题。