组件有各种事件，比如，点击事件 @click 、键盘事件 @keyup
v-on: 指令可以简写成 @
一、自定义组件中，子组件获取父组件的数据
1、调用子组件时，定义事件<my-header @parentRun="run"></my-header>
<template>
<div>
//自定义一个事件 parentRun，该事件执行时会调用run方法
<my-header @parentRun="run"></my-header>
</div>
</template>
<script>
import MyHeader from '../components/MyHeader'
export default {
data() {
return {
msg: "主页"
}
},
components:{
MyHeader
},
methods:{
run(){
alert("我的home组件的run方法")
}
}
};
</script>
2、子组件使用this.$emit("parentRun")调用父组件数据和方法
<template>
<div>
<button @click="myRun">获取父组件传过来的方法</button>
<br>
</div>
</template>
<script>
export default {
data() {
return {
msg: "头部组件",
}
},
methods:{
myRun(){
//调用父组件自定义的parentRun事件
this.$emit("parentRun")
}
}
}
</script>
二、自定义组件中，父组件获取子组件的数据
1、一样也是调用组件时，定义一个方法，同上，但是方法中要加入参数，用于获取子组件传值
<template>
<div>
<my-header @parentRun="run"></my-header>
</div>
</template>
<script>
import MyHeader from '../components/MyHeader'
export default {
data() {
return {
msg: "主页"
}
},
components:{
MyHeader
},
methods:{
//加入参数value 用于接收子组件的传值
run(value){
alert(value)
}
}
};
</script>
2、子组件调用的事件要，回传一个参数
<template>
<div>
<button @click="myRun">获取父组件传过来的方法</button>
<br>
</div>
</template>
<script>
export default {
data() {
return {
msg: "头部组件",
}
},
methods:{
myRun(){
//调用父组件自定义的parentRun事件，第二个参数是传值给父组件
this.$emit("parentRun","我是子组件传值")
}
}
}
</script>
总结
1、一种组件间通信的方式，适用于：子组件给父组件传递数据
2、使用场景：A是父组件，B是子组件，B想给A传数据，那么就要在A中给B绑定自定义事件事件的回调在A中。
3、绑定自定义事件：
test是一个写在父组件中的方法
①. 第一种方式，在父组件中：
<Demo @myevent="test"/> 或 <Demo v-on:myevent="test"/>
②. 第二种方式，在父组件中：
<Demo ref="domo"/>
mounted(){
this.$refs.domo.$on('myevent',this.test)
}
③若想让自定义事件只能触发一次，可以使用 once 修饰符，或 $once 方法。
4、触发自定义事件：
this.$emit('myevent',数据)
//这里的回传数据可以是 字符串、对象、数组
//单个参数
this.$emit('事件名称',this.name)
//父组件中接收
welcome(name，age){
console.log(student.name)
}
//多个参数一个个传的方式
this.$emit('事件名称',this.name,this.age)
//父组件中接收
welcome(name，age){
console.log(student.name)
}
//如果参数特别多后面参数可以使用 ...params
welcome(name，...params){
console.log(student.name，...params)
}
//多个参数 ，对象形式
student：{name:"lucy",age:18}
this.$emit('事件名称',this.student)
//父组件中接收
welcome(student){
console.log(student.name)
}
//多个参数 ，数组形式
hobby:["吃饭","睡觉","打代码"]
this.$emit('事件名称',this.student)
//父组件中接收
welcome(hobby){
console.log(hobby[0])
}
5、解绑自定义事件
//解绑单个自定义事件，直接写事件名称
this.$off('myevent')
//解绑多个自定义事件，写成数组形式
this.$off(['myevent1','myevent2'])
//暴力解绑所有自定义事件
this.$off()
6、组件上也可以绑定原生DOM事件，需要使用native修饰符。
<Student ref="student" @click.native="show"/>
7、注意：通过this.$refs.xxx.$on('myevent',回调)绑定自定义事件时，回调要么配置在methods中，要么用箭头函数，否则this指向会出问题！
如果没有写成箭头函数，this指向的是自定义事件所在的那个组件