.sync principle

Use the premise:

First, we need to be clear that between child-parent communication components, sub-assemblies can not change the value of the direct parent component. (Parent element is big brother, younger brother does not change the value of big brother, but the parent component subassembly can change the value)

effect:

In some way, the subassembly can be "directly" to change the value of the parent element.

Scenes:

A display control block and a closed bomb. Open frame subassembly projectile within parent components, and then click the button to close the popup box subassembly.

method:

1. General process we pass child-parent values ​​as follows:

// 父组件
<template>
    <div class="parent-file">
        <input type="button" value="打开子组件" @click="show">
        <!-- 子组件插槽 -->
        <child @changeVisibleState="changeVisible" :visible="childShow"/>
    </div>
</template>

<script>
import child from "./child"
    export default {
        data () {
            return {
                childShow: false
            }
        },
        components: {
            child
        },
        methods: {
            show(){
                this.childShow = true;
            },
            changeVisible (val) {
                this.childShow = val;
            }
        }
    }
</script>

// 子组件
<template>
    <div class="child-file">
        <input type="button" value="点我隐身" @click="doClose" v-show="visible">
    </div>
</template>

<script>
    export default {
        props: [ 'visible' ],
        methods: {
            doClose () {
                this.$emit("changeVisibleState", false)
            }
        }
    }
</script>

2. Improve:

Such wording right, but was the more bloated, obviously I just want to change a value, you can not simply point?

The answer is, of course, is possible.

I am sure you will think that I can not change the value of the parent component directly? I would like v-model as more cool.

vue also take into account this point, it offers a better solution

// parent component 
//   first method of the write line, the function of writing an arrow. 
//   Why method name is update: visible, emit method is defined in the following sub-components. 
<Template> 
    <div class = "parent-File"> 
        <= the INPUT of the type "the Button" value = "open subcomponents" @ the Click = "Show"> 
        <- - sub-assembly slot!> 
        <Child @Update: = visible "(Val) => = {Val} childShow": visible = "childShow" /> 
    </ div> 
</ Template> 

<Script> 
Import from Child "./child" 
    Export default { 
        Data () { 
            return { 
                childShow:
        }, 
        Methods: { 
            Show () { 
                the this .childShow = to true ; 
            }, 
            // to simplify the code 
            // changeVisible (Val) { 
            //      this.childShow = Val; 
            // } 
        } 
    }
 </ Script>

// 子组件
<template>
    <div class="child-file">
        <input type="button" value="点我隐身" @click="doClose" v-show="visible">
    </div>
</template>

<script>
    export default {
        props: [ 'visible' ],
        methods: {
            doClose () {
                // 修改前代码
                // this.$emit("changeVisibleState", false)

                // 改变写法
                this.$emit("update:visible",false);
            }
        }
    }
</script>

3. Finally:

For @update: visible = "(val) => {childShow = val}": visible = "childShow", vue provides a syntactic sugar, substituting it: visible.sync = "childShow", this is not seem more concise.

Then it becomes:

// 父组件
<template>
    <div class="parent-file">
        <input type="button" value="打开子组件" @click="show">
        <!-- 子组件插槽 -->
        <child :visible.sync = "childShow"/>
    </div>
</template>

<script>
import child from "./child"
    export default {
        data () {
            return {
                childShow: false
            }
        },
        components: {
            child
        },
        methods: {
            show(){
                this.childShow = true;
            } 
            // to simplify the code 
            // changeVisible (Val) { 
            //      this.childShow = Val; 
            // } 
        } 
    }
 </ Script>

// sub-assembly 
<Template> 
    <div class = "Child-File"> 
        <= the INPUT of the type "the Button" value = "Point me stealth" @ the Click = "doClose" v-Show = "visible"> 
    </ div> 
< / Template> 

<Script> 
    Export default { 
        The props: [ 'visible' ], 
        Methods: { 
            doClose () { 
                // before the modification 
                // . EMIT the this $ ( "changeVisibleState", to false) 

                // change the wording 
                // NOTE: emit the function name must be in this format "update: props" name, which props is our child-parent communication between the value of 
                the this $ EMIT. ( "Update: visible", false );
            }
        }
    }
</script>