使用vue的sync修饰符进行子父组件的数据绑定

官方文档

父组件代码

<template>
    <div>
        <input type="button" value="我是父组件的按钮" @click="show" />
        <!-- 在需要子组件修改的数据后加上.sync即可 -->
        <child :isShow.sync='isShow' v-show="isShow" />
    </div>
</template>
<script>
import child from './child'
export default {
    components:{
        child
    },
    data () {
        return {
            isShow: false
        }
    },
    methods: {
        show() {
            this.isShow = true
        },
    }
}
</script>

子组件代码块

<template>
    <div>
        我是一个子组件
        <button @click="childisShow">点我隐身</button>
    </div>
</template>
<script>
export default {
    methods: {
        childisShow() {
            //当子组件需要修改父组件的值时，需要显示触发更新事件
            // this.$emit('update:XXXX','内容')
            this.$emit('update:isShow',false)
        }
    }
}
</script>