使用组件v-model时的value和model-value

一、问题

        在学习自定义指令v-model时，实现父子组件的传递时，子组件的propos，value 为 undifined.

二、解决过程

   仔细看过v-model 的 原理之后，尝试了写一个demo简单模拟下，但是还是不正确。

   在查阅vue文档中，发现了关于组件的v-model。

    v-model的原生元素的上的用的用法， 

<input v-model="searchText>

        等同于

<input
  :value="searchText"
  @input="searchText = $event.target.value"
/>

但是在组件上，v-model展开的形式如下

<CustomInput
  :model-value="searchText"
  @update:model-value="newValue => searchText = newValue"
/>

三、分析

四、解决

在这个过程中，子组件的内部做了2件事

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

父组件的等同于

<Mytag  
 :model-value="searchText"
  @update:model-value="newValue => searchText = newValue"
> </Mytag>