Custom event use and precautions:

1. Custom events are a communication method between components , applicable to: child components ==> parent components ;

2. Usage scenario: A is the parent component, B is the child component, and B wants to pass data to A, then it must bind a custom event to B in A (the callback of the event is in A ) ;

3. Bind custom events:

The first way: in the parent component

<Student v-on:atguigu="getStudentName"></Student>

<Student @atguigu="getStudentName"></Student>

The second way: use ref

ps: If you want a custom event to be triggered only once , you can use the once modifier or the $once method ;

4. Trigger a custom event: this.$emit('atguigu',this.test) ;

5. Unbind the custom event: this.$off('atguigu') ;

6. Native DOM events can also be bound to components , but the native modifier needs to be used ;

<Student @click.native='demo'></Student>

7. When binding a custom event through this.$ref.xxx.$on('atguigu', callback) , the callback must either be configured in methods or use an arrow function , otherwise there will be problems with the direction of this;

1. Define custom events

1. Use @ or v-on

<Student v-on:atguigu="getStudentName"></Student>

methods:{
            getStudentName(name){
                console.log('App收到了学生名：',name)
            }
}

2. Use ref

<Student ref="student"></Student>

mounted(){
            // 功能较为强大，可以实现定时器
            setTimeout(()=>{
                this.$refs.student.$on('atguigu',this.getStudentName)
            })
        }

Code example:

app.vue

<template>
    <div>
        <!-- 通过父组件给子组件传递函数类型的props，实现子组件给父组件传递数据 -->
      <School :getSchoolName="getSchoolName"></School>

      <!-- 通过父组件给子组件绑定一个自定义事件，实现子组件给父组件传递数据（第一种写法：使用@或者v-on） -->
      <Student v-on:atguigu="getStudentName"></Student>

      <!-- 通过父组件给子组件绑定一个自定义事件，实现子组件给父组件传递数据（第二种写法：使用ref） -->
      <Student ref="student"></Student>
    </div>
</template>

<script>
    import School from './components/School.vue'
    import Student from './components/Student.vue'

    export default {
        name:'App',
        components:{
            School,
            Student
        },
        data(){
            return{
                msg:'欢迎学习vue'
            }
        },
        methods:{
            getSchoolName(name){
                console.log("App收到了学校名：",name)
            },
            getStudentName(name){
                console.log('App收到了学生名：',name)
            }
        },
        mounted(){
            // 功能较为强大，可以实现定时器
            setTimeout(()=>{
                this.$refs.student.$on('atguigu',this.getStudentName)
            })
        }
    }
</script>

Student.view

<template>
    <div class="demo">
        <h2>学生姓名：{
   
   {name}}</h2>
        <h2>学生年龄：{
   
   {age}}</h2>
        <button @click="sendStudentName">把学生名给App</button>
    </div>
</template>

<script>
export default {
    name:'Student',
    data() {
        return {
            name:'张三',
            age:18
        }
    },
    methods:{
        sendStudentName(name){
            // 触发Student实例对象身上的atguigu事件
            this.$emit('atguigu',this.name)
        }
    }
}
</script>

2. Unbind custom events

Use this.$off() to unbind custom events;

1. Unbind a custom event

unbind(){
            this.$off('atguigu') //解绑一个事件
        }

2. Unbind multiple custom events

unbinds(){
            this.$off(['atguigu','demo']) //解绑多个事件
        }

3. Unbind all custom events

unbinds(){
            this.$off() //解绑所有的自定义事件
        }

Define and unbind custom events in components