自定义事件

可以用来：子组件=>父组件传递数据

一、绑定和使用自定义事件

在父组件中写子组件的自定义事件（给子组件绑定事件），在子组件中调用

在App.vue中

<Student @customevent="demo">第一种直接绑定自定义事件</Student >

<Student ref="student ">第二种通过ref绑定自定义事件，相对灵活</Student >

methods:{

　　demo(value,x,y,z){}

　　//demo(value,...params){} 这种方法拿到数据value和数组[x,y,z]

}

data(){

　　return{

　　name:''

　　}

　　}

mounted:{

　　this.$refs.student .on('customevent'，this.demo)//组件挂载完毕绑定一个事件

　　this.$refs.student .once('customevent'，this.demo)//组件挂载完毕绑定一个事件

　　区分this

　　this.$refs.student .once('customevent'，function(value){ this.name})//此处的this是Student组件

　　this.$refs.student .once('customevent'，(value)=>{ this.name})//此处可以访问到data的name,this找不到向上找

}

}

在Student.vue中

<button @click="sendvaluetoApp"></button>

methods:{

　　sendvaluetoApp(){

　　setTimeout(()=>{

　　　　//灵活在这儿，可以写在方法里面，方法里面当然可以做很多其他的事情

　　　　this.$emit('demo'，value)----触发组件的customevent事件,在子组件中调用App中的demo方法

　　　　//value可以多个，例如value,666,777,888

　　},3000)

　　}

}

二、解绑自定义事件

　　

methods:{

　　unbind(){

　　　　this.$off('demo')----这种方式只能解绑一个

　　　　this.$off(['demo1','demo2'])----这种方式可以同时解绑多个

　　　　this.$off()----这种方式解绑所有

　　}

}

三、和生命周期destory的关系

　　在组件Student中

　　this.$destory()//写在按钮事件中，用于销毁组件

　　销毁后：原生的事件方法任然有用，所有自定义事件全部失效。写在main中这所有子组件和子组件的自定义事情全部失效

四、在组件中使用原生事件

<Student @click.native="demo">必须要native修饰，否者认为是click自定义事件</Student >