功能：父组件传数据给子组件，子组件改prop值并通知父组件
1、无.sync实现方法
子组件
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| <template>
<div class="child">
{{money}}
<button @click="$emit('update:money', money - 100)">
<span>花钱</span>
</button>
</div>
</template>
<script>
export default {
props:["money"]
};
</script>
|
父组件
1
2
3
4
5
6
7
| <template>
<div id="app">
App.vue 我现在有 {{total}}
<hr>
<Child :money="total" v-on:update:money ="total = $event" />
</div>
<template>
|
2、有.sync修饰符实现方法
父组件
1
2
3
4
5
6
7
| <template>
<div id="app">
App.vue 我现在有 {{total}}
<hr>
<Child :money.sync="total" />
</div>
</template>
|
子组件
不变
3、修饰符sync小结
3.1 功能
当一个子组件改变了一个 prop 的值时，这个变化也会同步到父组件中所绑定。
3.2 缩写
:money.sync="total" 等价于 :money="total" v-on:update:money ="total = $event"
3.3 是一个语法糖