组件的自定义事件

src/components/School.vue

<template>
    <div class="school">
        <h2>学校名称：{
   
   { name}}</h2>
        <h2>学校地址：{
   
   { address }}</h2>
        <button @click="sendSchoolName">把学校名给App</button>
    </div>
</template>

<script>
export default {
    name: 'School',
    props:['getSchoolName'],
    data() {
        return {
            name:'黑马',
            address:'广州'
        }
    },
    methods:{
        sendSchoolName(){
            this.getSchoolName(this.name)
        }
    }
}
</script>

<style scoped>
    .school{
        background-color: skyblue;
        padding: 5px;
    }
</style>

src/components/Student.vue

<template>
    <div class="student">
        <h2>学生姓名：{
   
   { name }}</h2>
        <h2>学生性别：{
   
   { sex }}</h2>
        <h2>当前求和：{
   
   { number }}</h2>
        <button @click="add">点我number++</button>
        <button @click="sendStudentName">把学生名给app</button>
        <button @click="unbind">解绑atguigu事件</button>
        <button @click="death">销毁当前Student组件的实例（vc）</button>
    </div>
</template>

<script>
export default {
    name: 'Student',
    data() {
        return {
            name:'张三',
            sex:'男',
            number:0
        }
    },
    methods:{
        sendStudentName(){
            // 触发Student组件实例身上的atguigu事件
            this.$emit('atguigu',this.name,666,888,999)
            this.$emit('demo')
            // this.$emit('click')
        },
        unbind(){
            // this.$off('atguigu') //解绑一个自定义事件
            // this.$off(['atguigu','demo']) //解绑多个自定义事件
            this.$off() //解绑所有自定义事件
        },
        add(){
            console.log('add回调被调用了！');
            this.number++
            return this.number
        },
        death(){
            this.$destroy() 
            //销毁了当前Student组件的实例，销毁后所有Student组件实例的自定义事件全部不生效
        }
    }
}
</script>

<style lang="less">
    .student{
        background-color: pink;
        padding: 5px;
        margin-top: 30px;
    }
</style>

src/App.vue

<template>
    <div class="app">
        <h1>{
   
   { msg }} 学生名字是：{
   
   { studentName }}</h1>
        <!-- 1.通过父组件给子组件传递函数类型的props实现：子给父传递数据 -->
        <School :getSchoolName="getSchoolName" />
        <!-- 给Student组件的实例对象vc绑定:atguigu这个事件 -->
        <!-- 2.通过父组件给子组件绑定一个自定义事件实现：子给父传递数据（第一种） -->
        <!-- <Student v-on:atguigu.once="getStudentName"/> -->
        <!-- <Student @atguigu.once="getStudentName" @demo="m1"/> -->

        <!-- 2.通过父组件给子组件绑定一个自定义事件实现：子给父传递数据（第二种） -->
        <Student ref="student" @click.native="show"/>
    </div>
</template>

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

export default {
    name: 'App',
    data() {
        return {
            msg: '你好啊！',
            studentName: ''
        }
    },
    components: { Student, School },
    methods: {
        getSchoolName(name) {
            console.log('App收到了学校名', name);
        },
        /* getStudentName(name,...params){// es6语法
            console.log('App收到了学生名',name,params);
            this.studentName=name
        }, */
        m1() {
            console.log('demo事件被触发了！');
        },
        show(){
            alert(123)
        }
    },
    mounted() {
        this.$refs.student.$on('atguigu', (name, ...params) => {
            console.log('App收到了学生名', name, params);
            this.studentName = name
        }) //绑定自定义事件
        // this.$refs.student.$once('atguigu',this.getStudentName)//绑定自定义事件（只能触发一次）
    }
}
</script>

<style scoped>
.app {
    background-color: gray;
    padding: 5px;
}
</style>

main.js

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

//创建vm
new Vue({
    el: '#app',
    render: h => h(App),
    // mounted(){
    //     setTimeout(()=>{
    //         this.$destroy()
    //     },3000)
    // }
})

总结：解绑所有自定义事件，然后组件本身的add()还是会生效的

箭头函数没有自己的this，只能往外找那么就是App