子组件更新props中的属性值，并更新到父组件

如何实现在子组件中更新props中的属性值，并且更新到父组件呢？

有两种实现方式：.sync 和 自定义v-model

一、.sync属性

父组件在给子组件传值时，属性名后需要加修饰符.sync，格式 :子组件props属性名.sync

父组件
<template>
<div id="app">
    // 注意点一、:show后跟修饰符.sync
    // 等同于<my-componen :show="valueChild" @update:show="val => valueChild= val" />
    <my-component :show.sync='valueChild' />
</div>
</template>
<script>
export default {
    data(): {
        return {valueChild: false}
    }
}
</script>

子组件
<template>
    <h3>{{show}}</h3>
    <button @click="eventOpt">子组件事件</button>
</template>
<script>
export default {
   props: {
       show: { type: Boolean, default: false}
    } ,
    methods: {
        eventOpt() {
            // 注意二、事件名必须为update:属性名
            // 更改prop中的属性show的属性值，同时更新父组件中中valueChild的属性值
             this.$emit('update:show', false);
        }
    }
}
</script>

二、v-model应用

子组件定义的属性名必须为 value

父组件向上弹射事件给子组件时，事件名必须为 input

父组件
<template>
<div id="app">
   // 等同于<my-componen :value="valueChild" @input="val => valueChild= val" />
    <my-component :value='valueChild' />
</div>
</template>
<script>
export default {
    data(): {
        return {valueChild: false}
    }
}
</script>


子组件
<template>
    <h3>{{show}}</h3>
    <button @click="eventOpt">子组件事件</button>
</template>
<script>
export default {
   props: {
     // 注意点一、属性名必须为value
      value: { type: Boolean, default: false}
    } ,
    methods: {
        eventOpt() {
            // 注意二、事件名必须为input
            // 更改prop中的属性show的属性值，同时更新父组件中中valueChild的属性值
             this.$emit('input', false);
        }
    }
}
</script>

比较

v-model 子组件只能更改props中的一个属性值value；

.sync 子组件可以更改props中的多个属性值;