Vue中$emit的用法

前言：在开发的过程中，我们很多时候都需要用到组件之间的通信，父组件可以通过props把数据传给子组件，这是父→子的通信。同样，也有子→父的通信方式，$emit就是其中的一种。子组件可以通过$emit，让父组件监听到自定义事件。

Vue2中

使用：比如子组件使用$emit定义一个自定义事件FuncHello

子组件在方法中设定一个sendByEmit方法，方法中使用$emit向父组件发出启动’FuncHello’的方法，传入的参数是data。
加入一个按钮，点击按钮触发sendByEmit函数

<template>
    <button @click="sendByEmit()">按下发送$emit</button>
</template>

<script>
export default{
    name :  'Children',
    props : {
        msg : String
    },
    methods : {
        sendByEmit(){
            let data = 'hello'
            this.$emit('FuncHello', data)
        }
    }
}

</script>

父组件中引入子组件，通过v-on或者是@引入自定义的方法FuncHello

加入一个h1标签，用v-for的方法将数据中的text数组遍历出来。
声明一个getEmitData方法，用于接受FuncHello方法传过来的数据，对数据进行操作，这里是把数据推到text数组里面

<template>
    <div>
        <h1 v-for="(item, index) in text" :key="index">
            {{ item }}
        </h1>
        <Children @FuncHello="getEmitData" ></Children>
    </div>
</template>

<script>
import Children from '@/components/Children.vue'

export default {
    name : 'Father',
    components : {
        Children
    }, 
    data() {
        return{
            text : ['12345']
        }
    },
    methods : {
        getEmitData(data){
            this.text.push(data)
        }
    }
}

</script>

Vue2中

效果