我们来定义一个事例

• A有一个儿子B,B上学需要花钱,B会定期消费,A接收到通知会给B打钱.
• A定义成Vue实例,B定义成Vue组件.

伪代码1::

//A 
<B  :money="money"   /> 
data: {  money: 10000  }
//B
<button @click="money-=1000">消费</button>
props: ["money"]

• 这还不简单?
• 在B组件中,直接操作money变量就好了,不好意思会报错!
• props中的数据是Vue实例传递的,可以更改.
• 但是下次Vue实例传递数据,会覆盖组件中更改的数据.
• 所以这样是不可以的.

伪代码2::

//A 
<B  :money="money"  @:useMoney="money=$event"  /> 
data: {  money: 10000  }
//B
<button @click="$emit('useMoney',money-1000)">消费</button>
props: ["money"]

• 这里需要用$emit,Vue内置的eventBus,用于全局通讯.
• 可以实现发布,订阅.
• 每次B消费,被A监听到.A给B打钱消费.
• $event是Vue内置的寄存变量.

• 伪代码2中有一些复杂,Vue说我要优化.

伪代码3::

//A 
<B  :money.sync="money"  /> 
data: {  money: 10000  }
//B
<button @click="$emit('useMoney',money-1000)">消费</button>
props: ["money"]

• .sync修饰符是一个语法糖,来处理$emit订阅.
• 将监听,以及数据寄存进行隐藏 @:useMoney="money=$event"
• .sync只需要知道绑定的属性是谁
• 其他的内容,由.sync去做.