Between vue.js child-parent components (upward) by value

Several ways to pass values

1. Sons (downward) by value : The property
2. Child-parent (up) by value : through custom event
3. Non-traditional values Sons : By Bus (non-parent-child value one pass mode)

Child-parent (upward) by value tutorial

Value of the data transfer between the components are of the single data stream.

初始代码：(现在没有向上传值)

/*==========================html=======================================*/
<div id="root">
    <input type="button" @click="isShow = !isShow" value="显示与隐藏">
	<wrap v-show="isShow" :change-is-show="changeIsShow"></wrap>
</div>
/*==========================js=======================================*/
    new Vue({
        el:"#root",
        data: {
            isShow: true
        },
        components:{
            wrap:{
                props:["changeIsShow"],
                template:`
                    <div style="width:200px;height:200px;background:red;">
                        我是一个名字wrap的组件
                    </div>
                `
            }
        }
    })

:( effect can click Show hidden buttons are displayed below the red zone disappears)

Now I want to add a button to the red zone, to achieve its own hidden

• This area used to determine whether the decision to use hidden on the parent display hidden data (isShow)
• As long as I am able to modify my father and my son in the isShow components on it
• This value is passed between the child-parent (upward)

/*-----------------------html---------------------------------*/

<div id="root">
    <input type="button" @click="isShow = !isShow" value="显示与隐藏">
   <wrap v-show="isShow" :change-is-show="changeIsShow"></wrap>  //使用 changeIsShow 方法
</div>

/*-----------------------js---------------------------------*/

    new Vue({
        el:"#root",
        data: {
            isShow: true
        },
        methods:{   //我新建了一个方法，
            changeIsShow(bol){
                this.isShow = bol;
            }
        },
        components:{
            wrap:{
                props:["changeIsShow"],
                template:`
                    <div style="width:200px;height:200px;background:red;">
                        <input type="button" @click="changeIsShow(false)" value="隐藏">
                        我是一个名字wrap的组件
                    </div>
                `
            }
        }
    })

Diagram