vue自定义组件v-model

自定义组件使用v-model

vue中的v-model指令实现了表单的双向绑定，这是官网的一个栗子：

<input type="text" v-model="message">
<p>{{message}}</p>
// v-model只是语法糖，真正的实现形式：
<input type="text" :value="message" @input="message = $event.target.value">

将输入框的值绑定到message变量上，这只是单向的，改变message的值可以改变input的value，但是改变input的输入不会改变message。
监听input事件，当输入类内容时改变message变量，从而实现了双向绑定。

// HTML部分
<div id="app">// 4.父组件的value值绑定到price<price-input :value="price" @input="onInput"></price-input>
</div>

// js部分
Vue.component('custom-input',{// 1.监听input,输入时触发自定义组件内部的updateVal事件template: `<input :value='value' @input='updateVal($event.target.value)' type='text'></input>`,// 5.通过props传递，实现父组件值绑定到输入框的valueprops: ['value'],methods: {// 2.触发父组件上的input事件updateVal(val){this.$emit('input', val);}}
});var app = new Vue({el: '#app',data(){price: ''},methods: {// 3.传递过来的值赋给父组件的price变量，实现了输入框到父元素的单向绑定onInput(val){this.price = val;}}
})

通过上面的分析，默认情况下，一个组件上的 v-model 会把 value 用作 prop 且把 input 用作 event。所以当我们在一个自定义组件上使用v-model并不能实现双向绑定，因为自定的组件并没有默认的value和input事件，在使用时，我们需要按照上面那样显式的去声明定义这些东西。这时，model选项就派上用场了，在定义组件的时候，指定prop的值和监听的事件。

<template><input type="text" :value="uname" @input="updateVal($event.target.value)">
</template>

Vue.component('my-input',{model: {prop: 'uname',// 随便命名事件，对应下面$emit即可event: 'changeXXX'},props: {uname: {type: String,default: 'tom'}},methods: {updateVal(val){this.$emit('changeXXX',val)}}
})

父组件内使用时，使用v-model就可以啦

// name是父组件中的属性
<my-input v-model="name" value="some value"></my-input>
<p>{{name}}</p>
// 等价于
<my-input :uname='name' @changeXXX='val => {foo = val}' value='some value'></my-input>

版权声明：本文为CSDN博主「Liu_Jun_Tao」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/Liu_Jun_Tao/article/details/90232658

vue自定义组件v-model相关推荐

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自定义组件及组件传值
vue自定义组件: 1.在src中components中,新建文件,后缀名为.vue组件(首字母建议大写)例如:Weekly.vue 2.Weekly.vue: 3.在app.vue中引用组件: js ...

vue自定义组件v-model

自定义组件使用v-model

vue自定义组件v-model相关推荐

最新文章

热门文章