官方文档

https://cn.vuejs.org/v2/guide/components-custom-events.html?#自定义组件的-v-model

解决方案

一个组件上的 v-model 默认会利用名为 value 的 prop 和名为 input 的事件，但是像单选框、复选框等类型的输入控件可能会将 value attribute 用于不同的目的。model 选项可以用来避免这样的冲突：

Vue.component('base-checkbox', {model: {prop: 'checked',event: 'change'},props: {checked: Boolean},template: `<inputtype="checkbox"v-bind:checked="checked"v-on:change="$emit('change', $event.target.checked)">`
})

现在在这个组件上使用 v-model 的时候：

<base-checkbox v-model="lovingVue"></base-checkbox>

这里的 lovingVue 的值将会传入这个名为 checked 的 prop。同时当 <base-checkbox> 触发一个 change 事件并附带一个新的值的时候，这个 lovingVue 的属性将会被更新。

注意你仍然需要在组件的 props 选项里声明 checked 这个 prop。

默认状态下是model:{prop:’value’,event:’change’}

业务逻辑

当有数据输入时触发了该组件的input事件
手动触发父组件的input事件并将值传给父组件
父组件的input事件被触发，将传来的值赋给父组件的变量value，实现输入框value到父元素的value的单向绑定
父组件value的值绑定到value
将父组件的value值通过props传递给子组件，实现了父组件的value到子组件value的单向绑定

参考文章

https://blog.csdn.net/orq18810575870/article/details/82027514

https://www.cnblogs.com/wind-lanyan/p/7899428.html

https://www.cnblogs.com/eret9616/p/11311264.html

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命令从私服下 ...

Vue——自定义组件的 v-model

官方文档

解决方案

业务逻辑

参考文章

Vue——自定义组件的 v-model相关推荐

最新文章

热门文章