自定义组件支持双向绑定的实现
组件 实现 自定义 支持 绑定 双向
2023-09-14 09:08:23 时间
假设有这样一个单文件组件:CustomerInput.vue,其内容如下:
<template> <div> <input class="commafy-input__inner" v-bind:value="value" v-on:input=$emit('input', $event.target.value)""></input> </div> </template> <script> export default { name: 'customer-input', model: { prop: 'value', event: 'input' }, props: { value: { type: String, default: '' } } } </script> <style scoped> . customer-input__inner { background-color: #fff; background-image: none; border-radius: 4px; border: 1px solid #dcdfe6; box-sizing: border-box; color: #606266; display: inline-block; font-size: inherit; height: 32px; line-height: 32px; padding: 0 15px; transition: border-color .2s cubic-bezier(.645,.045,.355,1); width: 100%; } </style>
那么在其它单文件组件中使用该组件时,可以这样使用:
<template> <div> <customer-input v-model="value" /> </div> </template> <script> import CustomerInput from 'CustomerInput.vue' // 或者 import CustomerInput from 'CustomerInput' export default{ // 第一种写法 components: { CustomerInput } // 第二种写法 //components: { // 'customer-input': CustomerInput //} data() { return { value: '' } } } </script> <style> </style>
这样就实现了简单的双向绑定了。
相关文章
- struts+hibernate+oracle+easyui实现lazyout组件的简单案例——struts.xml配置详情
- struts+hibernate+oracle+easyui实现lazyout组件的简单案例——Action的实现类
- springboot结合baomidou dynamic-datasourc组件实现多数据源
- k8s组件说明:主要组件统一说明
- reactjs组件实例的三大属性之state属性使用示例
- 【视频】vue组件之$emit父子组件间值的传递
- 使用Vue封装过组件吗?有哪些?讲一下他们是怎么实现的
- SAP UI5 web Component的React组件,如何实现事件响应
- 腾讯低代码导航组件实现正文显示效果
- 一个Camel Multicast组件聚合策略问题的解决过程
- Android LiveData组件分析
- 【Android Gradle 插件】组件化中的 Gradle 构建脚本实现 ⑤ ( 优化 Gradle 构建脚本 | 构建脚本结构 | 闭包定义及用法 | 依赖配置 | android 块配置 )
- 日期时间选择器、Bootstrap日期和时间表单组件。bootstrap-datetimepicker实现年月日,时分秒的选择。
- Canvas组件:画布,可以实现动画操作。
- e861. 在两个组件之间共享输入映射和事件映射
- Vue2.x - 组件化编程
- Jetpack简直太香了!最新Android jetpack架构组件入门到精通
- 【微服务笔记15】微服务组件之Config配置中心实现用户认证、配置属性加解密
- 【Android入门】9、用 Retrofit 和 OkHttp 请求网络、JetPack 组件:ViewModel、LifeCycle、LiveData、Room、WorkManager
- Vuejs设计与实现8-异步组件与内建组件
- NioEndpoint组件:Tomcat如何实现非阻塞I/O?