vue子组件改变父组件数据的两种方法

今天再看github上别人的项目时发现一个vue的小细节，之前没有见过特写一篇文章记录一下……，小细节为方法二。

方法一

子组件代码

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

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

父组件

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

方法二

这个方法不用在父组件那里写自定义事件，对于处理一些小数据简单易用，推荐方法一（毕竟更形象直观）
子组件代码

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

父组件

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