组件上的 v-model

1. 为什么需要在组件上使用 v-model

v-model 是双向数据绑定指令，当需要维护组件内外数据的同步时，可以在组件上使用 v-model 指令。示意图如下：

• 外界数据的变化会自动同步到 counter 组件中
• counter 组件中数据的变化，也会自动同步到外界

2. 在组件上使用 v-model 的步骤

2.1 父向子

① 父组件通过 v-bind: 属性绑定的形式，把数据传递给子组件

② 子组件中，通过 props 接收父组件传递过来的数据

2.2 子向父

① 在 v-bind: 指令之前添加 v-model 指令

② 在子组件中声明 emits 自定义事件，格式为 update:xxx

③ 调用 $emit() 触发自定义事件，更新父组件中的数据

3. 子父双向绑定示例代码：

app.vue代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

mode.vue代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18