Vue 子組件更新props中de屬性值

更多vue實戰：https://www.yuque.com/smallwhy/fmgz6r

在子組件中更新props中的屬性值，並且更新到父組件，有兩種實現方式：.sync 和 自定義v-model

1、.sync屬性

• 父組件在給子組件傳值時，屬性名后需要加修飾符.sync，格式 :子組件props屬性名.sync
• 子組件向上彈射事件給父組件時，事件名必須為格式 update:props屬性名

父組件

<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>

2、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中的多個屬性值；