双向绑定/单向数据流

双向绑定就是当数据变化之后，视图同步更新；当视图变化之后，数据也会更新。

单向数据绑定就是当数据变化之后，视图同步更新；但是视图变化之后，数据不会更新。

首先需要清楚v-model的本质是一种语法糖，vue是单向数据流——>父级 prop 的更新会向下流动到子组件中，但是反过来则不行。这样可以有效防止从子组件意外变更父级组件的状态，从而导致你的应用的数据流向难以理解。

<CustomInput v-model="searchText" />
//等价于
<CustomInput
  :modelValue="searchText"
  @update:modelValue="newValue => searchText = newValue"
/>

要让这个例子实际工作起来，<CustomInput>组件内部需要做两件事：

1. 将内部原生 <input> 元素的 value attribute 绑定到 modelValue prop
2. 当原生的 input 事件触发时，触发一个携带了新值的 update:modelValue 自定义事件

<!-- CustomInput.vue -->
<script>
export default {
  props: ['modelValue'],
  emits: ['update:modelValue']
}
</script>

<template>
  <input
    :value="modelValue"
    @input="$emit('update:modelValue', $event.target.value)"
  />
</template>