面试题.sync修饰符

vue规则：组件不能修改props拿外部数据
this.$emit可以触发事件，并传参
$event可以获取$emit参数

渲染了app是一个组件template长这个样子

image.png
刷新运行
template的class叫app ，App.vue说我有多少钱{{total}}

---

下面有个子组件
image.png
子组件是从Child.vue怎么使用呢？
一定要声明下components:{Child: child}
看child怎么接受的

export default {
  props:["money"]//意思是接受一个外部数据名字叫money
};

于是把money传给child

<Child : money="total"/>//我把data里的total告诉你

Child的结构

<div class ="child">
  {{money}}
<button @click = "$emit('update:money',money-100)">
      <span>花钱</span>
</button>

钱是外部数据 修改不了

image.png

怎么申请呢

子组件当前实例this.$emit,可以修改为$emit
夫组件监听事件：v-on:我要花钱="total = $event " ; $event不是依附于this上，而是单独一个变量
想获取$emit后面的参数，就用$event

过程

爸爸给儿子一个money，儿子可以看到这个{{money}}。想花钱的时候不能直接，于是触发一个事件@click ="$emit('useMoney', money -100)".
爸爸发现他儿子有这个事件，久会把他儿子传过来的参数加到钱上通过$event
<Child : money="total" v-on:useMoney="total = $event"/>

最后根据vue规则useMoney改成update:money

在App.vue的模板里
<Child ：money.sync = "total"/>
有人在child上绑定了v-on和emit，这就是事件的发布订阅

image.png