Vue—组件的自定义事件

## 组件的自定义事件

1. 一种组件间通信的方式，适用于：<strong style="color:red">子组件 ===> 父组件</strong>

2. 使用场景：A是父组件，B是子组件，B想给A传数据，那么就要在A中给B绑定自定义事件（<span style="color:red">事件的回调在A（父组件）中</span>）。（因为父亲需要收到数据）

3. 绑定自定义事件：

1. 第一种方式，在父组件中：```<Demo@atguigu="test"/>``` 或 ```<Demov-on:atguigu="test"/>```

2. 第二种方式，在父组件中：

```js

<Demo ref="demo"/>

......

mounted(){

this.$refs.xxx.$on('atguigu',this.test)

}

```

3. 若想让自定义事件只能触发一次，可以使用```once```修饰符，或```$once```方法。

4. 触发自定义事件：```this.$emit('atguigu',数据)```

5. 解绑自定义事件```this.$off('atguigu')```

6. 组件上也可以绑定原生DOM事件，需要使用```native```修饰符。

7. 注意：通过```this.$refs.xxx.$on('atguigu',回调)```绑定自定义事件时，回调<spanstyle="color:red">要么配置在methods中</span>，<span style="color:red">要么用箭头函数</span>，否则this指向会出问题！

School.vue:

<template>
    <div class="school">
        <h2>学校名称：{{name}}</h2>
        <h2>学校地址：{{address}}</h2>
        <button @click="sendSchoolName">把学校名给app</button>
    </div>
</template>
<script>
    export default {
        name:'s-school',
        props:['getSchoolName'],
        data() {
            return {
                name:'********',
                address:'北京·昌平'
            }
        },
        methods:{
            sendSchoolName(){
                this.getSchoolName(this.name)
            }
        }
    }
</script>
<style scoped>
    .school{
        background-color: grey;
        padding: 5px;
    }
</style>

Student.vue：

<template>
    <div class="student">
        <h2 >学生名称：{{ name }}</h2>
        <h2>学生性别：{{sex}}</h2>
        <button @click="sendStudentName">把学生名给app</button>
        <button @click="unbind">解绑事件</button>
        <button @click="death">销毁当前Student组件的实例对象</button>
    </div>
</template>
<script>
    export default {
        name:'s-student',
        data() {
            return {
                name:'Gui',
                sex:'female'
            }
        },
        methods:{
            sendStudentName(){
                //自定义事件Gui触发，调用demo方法
                this.$emit('Gui',this.name)
                
            },
            unbind(){
                //只适用于解绑一个自定义事件
                this.$off('Gui')
                //解绑多个事件，需要将多个事件名字写在一个数组内传入
                //如果（）内不写参数，代表解绑所有事件
            },
            death(){
                this.$destroy()
                //销毁了当前实例对象
                //销毁后所有组件的自定义事件都被销毁了
            }
        }
    }
</script>
<style scoped>
    .student{
        background-color: rgb(135, 135, 40);
        padding: 5px;
        margin-top: 30px;
    }
</style>

App.vue:


<template>
    <div class="App">
        <h1>{{ msg }}{{ name }}</h1>
        <!--通过父组件给子组件传递函数的方式，实现子给父传递数据-->
        <School :getSchoolName="getSchoolName"/>
        <hr>
        <!--通过父组件给子组件绑定自定义事件的方式，实现子给父传递数据-->
        <!--注意！！！传入的函数=前为函数名，后面的为回调名-->
        <Student v-on:Gui="getStudentName"/>
        <!--由于v-on@可以缩写为：-->
        <!--所以如果绑定原生dom事件 @click=“”，click会被认为是自定义事件-->
        <!--解决办法： @click.native-->
        <!--第二种写法比第一种写法更灵活-->
        <!-- <Student ref="student"></Student> -->
    </div>
</template>
<script>
    import School from './components/School'
    import Student from './components/Student'
    export default {
        name:'App',
        components:{School,Student},
        data(){
            return{
                msg:'你好啊',
                studentName:''
            }
            
        },
        methods:{
            getSchoolName(name){
                this.studentName=name
            },
            getStudentName(name){
                console.log(name)
            }
        },
        // mounted(){
        //  //$on表示当....时
        //  //改为$once可以实现只使用一次
        //  this.$ref.student.$on('Gui',getStudentName)
        //  该函数的返回对象里的，this指的是触发该方法的实例对象
        //  这里返回的this指的是Student对象
        //  如果写成箭头函数，this指的就是当前组建的实例对象
        //这里就是app的vm
        // }
    }
</script>
<style scoped>
    .App{
        background-color: pink;
        padding: 5px;
    }
</style>