像这样的日期组件,在后台管理项目中是比较多的,而且加了快捷选项,代码量较多,因此封装成组件。
封装这一类型的组组件,主要是了解输入框双向绑定 v-model 的过程。
1、了解输入框双向绑定的过程:
- 输入文本框:
- 输入框的双向绑定 v-model,实际上是一个语法糖,等价于:
-
value="uname"
@input="uname=$event.target.value"
-
- 示例:Vue组件封装 ——input 输入框组件_黑猫了个怪怪的博客-CSDN博客_vue输入框
- 输入框的双向绑定 v-model,实际上是一个语法糖,等价于:
- 基础表单类型:
- 不同的表单元素 v-model 在内部绑定的事件也不同:
- text 和 textarea 元素使用
value
property 和input
事件; - check
- text 和 textarea 元素使用
- 不同的表单元素 v-model 在内部绑定的事件也不同: