# 练习 10：nextTick 和组件 v-model

## 目标

学会在 DOM 更新完成后执行逻辑，并理解 Vue3 组件 `v-model` 的通信约定。

## 你要练什么

- `nextTick`
- 组件 `v-model`
- `modelValue`
- `update:modelValue`

## 任务

- 封装一个搜索输入子组件
- 父组件通过 `v-model` 绑定关键字
- 点击“展开搜索区”后，等 DOM 更新完成再聚焦输入框
- 在控制台输出关键字变化

## 文件

- [starter.html](/Users/lijiaqing/home/wwwroot/front-end-example/08-vue3/10-next-tick-and-component-v-model/starter.html)
- [starter.js](/Users/lijiaqing/home/wwwroot/front-end-example/08-vue3/10-next-tick-and-component-v-model/starter.js)