vue自定义组件的v-model
vue对于原生的表单元素都支持v-model进行双向绑定,同样的,自定义组件也可以使用v-model实现双向绑定(这个个人觉得主要用于自定义组件内部存在表单元素时用的比较多)。
对于原生表单元素
比如input
<input v-model="peantText"></input>
vue内部帮我们实现双向绑定的原理如下:
<input :value="peantText" @input="inputChange($event.target.value)"></input>script部分:(这一部分其实最好还是通过计算属性实现比较好)
inputChange(value){this.peanutText = value
}
对于自定义组件
比如有一个自定义组件peanut-input:
<peanut-input v-model="peanutText"></peanut-input>
上述使用v-model之后,vue帮助我们做了如下所示的内容:
<peanut-input :model-value="peanutText" @update:model-value="peanutText = $event"></peanut-input>
具体使用时
假设我们在父组件中这样使用:
<template><h1>组件的v-model</h1><h2>App中的{{msg1}}</h2>
<!-- 通过v-model将msg1绑定到自定义组件上 --><peanut-input v-model="msg1"/>
</template><script>import peanutInput from "@/09_组件的v-model/peanutInput";export default {name: "App",data(){return {msg1:'Hello World 1'}},components:{peanutInput,}}
</script><style scoped></style>
对应的子组件代码:
<template><input type="text" :value="modelValue" @input="inputChange($event)">
</template><script>
export default {name: "peanutInput",props:['modelValue'], // 自定义组件中通过v-model绑定的属性 需要在组件内部使用名为modelValue的props接受emits:['update:modelValue'], // 触发的事件名格式必须是 update:modelValuemethods:{inputChange(e){this.$emit('update:modelValue',e.target.value)}}
}
</script><style scoped></style>
得到如下的效果:
更简洁的方式:计算属性
更简洁的方式就是通过计算属性将子组件中双向绑定的值抛出到父组件,只需要对子组件做如下的改动:
<template>
<!-- 直接使用v-model绑定 比另一种绑定的方式更加简洁--><input v-model="modelValue">
</template><script>
export default {name: "peanutInputComputed",props:['modelValue'],emits:['update:modelValue'],computed:{// 子组件中最好不要改动父组件传递过来的值 因此最好是通过计算属性将改变后的值抛出去changeValue:{get(){return this.modelValue},set(value){this.$emit('update:modelValue',value)}}}
}
</script><style scoped></style>
vue自定义组件的v-model相关推荐
- Vue如何自定义组件?超详细Vue自定义组件指南!使用自定义组件减少重复造轮子! ∠( °ω°)/ 前端知识
文章目录 使用意义 基础使用 给组件添加属性 传递事件 自定义组件的v-model 剖析v-model原理 使用示例 插槽 使用意义 有时候一组HTML代码可能会在多出使用(比如页眉页脚).如果我们把 ...
- vue 自定义组件双向数据绑定
文章目录 序 属性&事件传值双向绑定 v-model组件双向绑定 .sync修饰符双向绑定 总结 !!!这边文章记录的是 vue2 的概念,vue3 对双向绑定进行了改动,不要把一下代码放到 ...
- vue自定义组件-文件上传后端接口
学习目标: vue自定义组件-文件上传后端接口 学习内容: 准备工作: 后端环境:JAVA-Springboot项目数据库表(这里使用psql数据库):sys_file_record保存上传文件的信息 ...
- vue自定义组件及定义插槽
vue自定义组件绑定事件: <!DOCTYPE html> <html lang="en"> <head><meta charset=&q ...
- vue自定义组件,插槽,自定义事件
vue组件套娃 1. vue自定义组件 2. 组件和插槽套娃 3. vue组件通过自定义事件更改vue实例中的数据 1. vue自定义组件 语法 Vue.component('自定义组件名', {pr ...
- vue 嵌套表格组件_使用form-create动态生成vue自定义组件和嵌套表单组件
使用form-create动态生成vue自定义组件和嵌套表单组件 maker.create 通过建立一个虚拟 DOM的方式生成自定义组件 生成 Maker let rule = [ formCreat ...
- vue自定义组件是.vue还是html,Vue自定义组件的四种方式示例详解
四种组件定义方式都存在以下共性(血泪史) 规则: 1.组件只能有一个根标签 2.记住两个词全局和局部 3.组件名称命名中'-小写字母'相当于大写英文字母(hello-com 相当于 helloCom) ...
- Vue自定义组件封装及使用Excel
Vue自定义组件封装及使用Excel 一.js-xlsx 组件安装 二. 创建vue组件 三.使用 四.效果图 一.js-xlsx 组件安装 npm install xlsx --savenpm in ...
- Vue自定义组件之时间跨度选择器
时间跨度选择器 该组件是个时间跨度选择器. 基于 vue自定义组件之选择器 和 Vue自定义组件之日期时间范围选择器 点击选框,下拉列表中有四个选项,点击自定义时间,后边会出现 日期时间范围选择 代码 ...
- Vue自定义组件npm上传私服,且从私服下载使用
Vue自定义组件npm上传私服,yarn私服下载使用 安装镜像源管理工具nrm 发布自定义组件到公司私服 若未下载nrm源管理工具直接使用npm设置私服地址也可以 以下步骤都是基于npm命令 从私服下 ...
最新文章
- 一套简单通用的Java后台管理系统,拿来即用,非常方便(附项目地址)
- python cgi nginx_nginx uwsgi和cgi python脚本
- 【自动驾驶】3. DDS 数据分发服务(Data Distribution Service)
- 【渝粤教育】 广东开放大学 21秋期末考试物业环境与秩序管理10122k2
- 论文浅尝 | 引入“引用”的语言模型
- Java ClassLoader getResources()方法与示例
- One Shot Learning with Siamese Networks
- pcb成型板aoi检测_smt贴片加工打样的检测设备
- Mysql数据库的简单备份与还原_简单的MySQL备份与还原方法分享
- Rust: 在子线程启动子线程
- PICT-测试用例生成工具
- mysql类目树关系的保存和全排列查询
- 计算机怎么给表格添加蓝色边框,excel表格蓝色边框锁定|excel如何选择多个下拉菜单中的选项?...
- 第6章 访问权限控制
- 龙芯CPU开发系统固件与内核接口手册资料
- Identification和Verification的区别
- Jersey搭建restFul形式接口
- 老大说不要在项目中使用存储过程
- 40个热门网页设计素材psd源文件下载
- 行业最常见的7种AGV导航系统方式