Two ways for vue child components to change parent component data

When I looked at other people's projects on github today, I found a small detail of Vue. I have never seen a close-up article to record it before... The small details are method two.

method one

subcomponent code

<template>
    <div @click="open"></div>
</template>

methods: {
   open() {
        this.$emit('showbox',true); //触发showbox方法，true为向父组件传递的数据
    }
}

parent component

<child @showbox="toshow" :msg="msg"></child> //监听子组件触发的showbox事件,然后调用toshow方法
<div>{{ msg }}</div>
data () {
    return {
      msg: false,
    }
}，
methods: {
    toshow(msg) {
        this.msg = msg;
    }
}

Method Two

This method does not need to write custom events in the parent component. It is easy to use for processing some small data. Method 1 is recommended (after all, it is more intuitive)
child component code

<template>
    <div @click="open"></div>
</template>
methods: {
   open() {
        this.$emit('updata:mag',true); //触发showbox方法，true为向父组件传递的数据
    }
}

parent component

<child :msg="msg"></child> //监听子组件触发的showbox事件,然后调用toshow方法
<div>{{ msg }}</div>
data () {
    return {
      msg: false,
    }
}，
methods: {
    toshow(msg) {
        this.msg = msg;
    }
}