源码实现Element: Input

最近在搞Vue3组件库，自告奋勇要了 input 组件，学到了一点知识，在这里作参考。

技术细节直接抄 element-plus 和 element3 ，第一次做重在参与。

假定我们要封装这个元素：

<!-- 子组件 -->
<input type="text" />
<!-- 父组件 -->
<el-input v-model='inputVal' />

我们在父组件传递 v-model='inputVal ，在子组件的 props 里显然可以取到 props.modelValue 。（注意这里 vue3 的 v-model 技术实现变了，这里略过不提。）

如何在 input 中渲染父组件传递的值呢，显然我们需要一个 value 属性，就是下面的结果：

<input type="text" value="xxx" />

？？ 略过有点啰嗦的点

经过实践，在 vue3 中这样修改 input 的 value值最好

<input ref='input' />

然后在js中这些书写

setup(){
  // 页面初始化先定义一个 key为上面ref值的变量
  const input = ref(null)
  // 等到模板渲染时候会对 input进行复制，等到 mounted 就拿到了真实值
  onMounted(){
    console.log(input.value)
  }
}

官方文档是这样描述的 ，这个叫模板引用，相当于在模板中定义变量。