属性修饰符sync
组件通信方式的一种,可以实现父子组件数据同步
不使用sync修饰符实现父子组件数据同步
//不使用sync修饰符
//------------父组件------------//
<template>
<div>
小明的爸爸现在有{{money}}元
<Child :money='money' @update:money='money = $event'/>
// :money 父组件给子组件传递props
// @update:money 给子组件绑定的自定义事件,名字叫update:money
</div>
</template>
<script>
import Child from './Child.vue'
export default{
data(){
return{
money:10000
}
},
components:{Child}
}
</script>
//------------子组件 Child.vue------------//
<template>
<div>
<span>小明每次花100元</span>
<button @click='$emit('update:money',money-100)'>花钱</button>
爸爸还剩{{money}}元
</div>
</template>
<script>
export default{
props:['money']
}
</script>
使用sync修饰符实现父子组件数据同步
//使用sync修饰符
//------------父组件------------//
<template>
<div>
小明的爸爸现在有{{money}}元
<Child :money.sync='money' />
// :money.sync 第一 父组件给子组件传递props money
//第二 给当前子组件绑定了一个自定义事件,而且事件名称即为update:money
</div>
</template>
<script>
import Child from './Child.vue'
export default{
data(){
return{
money:10000
}
},
components:{Child}
}
</script>
//------------子组件 Child.vue------------//
<template>
<div>
<span>小明每次花100元</span>
<button @click='$emit('update:money',money-100)'>花钱</button>
爸爸还剩{{money}}元
</div>
</template>
<script>
export default{
props:['money']
}
</script>