Vue 3.x 组件的自定义事件v-on: 和 $emit

组件有各种事件，比如，点击事件 @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指向的是自定义事件所在的那个组件