Vue .sync 修饰符

153 阅读1分钟

.sync 修饰符

父子组件交互,当父组件通过props传值进子组件,子组件想要改变这个值时(一般直接修改会报错),

在子组件中通过$emit触发update事件并传参,然后父组件可以通过$event来接收$emit的参数。

//父组件中的 
<Child :value="total" v-on:update:value="total = $event"/>
//可以简写 用 .sync 语法糖
<Child :value.sync="total"/>
//Child.vue
<template>
    <div class="child">
        <button  @click="$emit('update:value',value - 10)">pay money</button>
    </div>
</template>

<script>
export default {
props: ["value"]
}
</script>
// ...