vue 子组件改变父组件传来的参数

需求：
点击父组件上的一个按钮，弹出一个子组件弹窗，子组件上面有一个关闭按钮，点击关闭按钮子组件隐藏；
实现：
在子页面：

<template>
    <div class='son' v-if='isShow'>
        <p class='title'>
            <button @click='hidden'>关闭</button>
        </p>
        <p>this is son box</p>
        <p>{{infoooo}}</p>
    </div>
</template>
<style>
.son {
    position: absolute;
    top:0;
    left:0;
    width: 200px;
    height: 200px;
    background-color: pink;
}
.title {
    width:100%;
    height: 30px;
}
</style>
<script>
export default {
    props:['showFlag','infoooo'],
    data () {
        return {
            msg: 'this is list page',
        }
    },
    computed:{
        isShow:function(){
            return this.showFlag
        }
    },
    mounted(){
        // console.log('son')
    },
    methods:{
        hidden(){
            this.$emit('changeshowval',false);
        }
    }
}
</script>

父页面：

<template>
  <div class="hello">
    <button @click='showSONFn'>show son</button>
    <son :showFlag='showson' @changeshowval='changesonshow' :infoooo='infoooo'></son>
  </div>
</template>

<script>
import son from '../son/index.vue';
export default {
  name: 'HelloWorld',
  data () {
    return {
      showson: false,
      infoooo:'父组件传过来的信息'
    }
  },
  components:{
    son
  },
  methods:{
      showSONFn(){
          this.infoooo = '父组件传过来的信息22222222'
          this.showson = true;
      },
      changesonshow(val){
          console.log('父组件接收到的值',val);
          this.showson = val;
      }
  },
 
}
</script>

或者通过对象是引用类型的特点，另一种方式实现：

子页面：

<template>
    <div class='son' v-if='isShow'>
        <p class='title'>
            <button @click='hidden'>关闭</button>
        </p>
        <p>this is son box</p>
    </div>
</template>
<style>
.son {
    position: absolute;
    top:0;
    left:0;
    width: 200px;
    height: 200px;
    background-color: pink;
}
.title {
    width:100%;
    height: 30px;
}
</style>
<script>
export default {
    props:['showFlag'],
    data () {
        return {
            msg: 'this is list page',
        }
    },
    computed:{
        isShow:function(){
            return this.showFlag.val
        }
    },
    methods:{
        hidden(){
            this.showFlag.val = false;
        }
    }
}
</script>

父页面：

<template>
  <div class="hello">
    <button @click='showSONFn'>show son</button>
    <son :showFlag='showson'></son>
  </div>
</template>

<script>
import son from '../son/index.vue';
export default {
  name: 'HelloWorld',
  data () {
    return {
      showson: {
          val:false
        },
      infoooo:'父组件传过来的信息'
    }
  },
  components:{
    son
  },
  methods:{
      showSONFn(){
          this.showson.val = true;
      }
  }
}
</script>