浅析Vue自定义组件的v-model
最近在学习vue，今天看到自定义事件的表单输入组件，纠结了一会会然后恍然大悟...官方教程写得不是很详细，所以我决定总结一下。
v-model语法糖
v-model实现了表单输入的双向绑定，我们一般是这么写的：
<div id="app">
<input v-model="price">
</div>
new Vue({
el: '#app',
data: {
price: ''
}
});
通过该语句实现price变量与输入值双向绑定
实际上v-model只是一个语法糖，真正的实现是这样的：
<input type="text" :value="price" @input="price=$event.target.value">
以上代码分几个步骤：
1.将输入框的值绑定到price变量上，这个是单向绑定，意味着改变price变量的值可以改变input的value，但是改变value不能改变price
2.监听input事件（input输入框都有该事件，当输入内容时自动触发该事件），当输入框输入内容就单向改变price的值
这样就实现了双向绑定。
自定义表单输入组件
我们平时写input可以不像上面那么复杂，直接用v-model就行了，但是既然我们研究这个语法糖那肯定是有别的用处，比如说自定义表单输入框组件。
<div id="app">
<input-price v-model="price"></input-price>
</div>
Vue.component('input-price', {
template: '<input type='text'>'
});
new Vue({
el: '#app',
data: {
price: ''
}
});
上面的<input-price>是我们自定义的表单输入组件，我们能直接用v-model实现双向绑定吗？如果你觉得可以那你就是Too young了~
首先根据我们的v-model语法糖来看
1.我们的子组件（input-price）的value需要绑定一个从父组件传来的值，通过子组件的props接收
2.在子组件上有新的输入时需要触发父组件的input事件，并将新的值作为参数传递给父组件
<div id="app">
<!-- <price-input v-model="price"></price-input> -->
<!-- 手动实现了v-model双向绑定 -->
<!-- 3、父组件的input事件被触发，将传来的值赋给父组件的变量price -->
<!-- 4、父组件value的值绑定到price -->
<price-input :value="price" @input="onInput"></price-input>
<p>{{price}}</p>
</div>
Vue.component('price-input', {
// 5、将父组件的value值通过props传递给子组件
// 1、当有数据输入时触发了该组件的input事件
template: '<input :value="value" @input="updateVal($event.target.value)" type="text">',
props: ["value"],
methods: {
updateVal: function(val) {
// 2、手动触发父组件的input事件并将值传给父组件
this.$emit('input', val);
}
}
});
var app = new Vue({
el: '#app',
data: {
price: ''
},
methods: {
onInput: function(val) {
this.price = val;
}
}
});
这里备注了几个步骤：
1.当有数据输入时触发了该组件的input事件
2.手动触发父组件的input事件并将值传给父组件
3.父组件的input事件被触发，将传来的值赋给父组件的变量price，实现输入框value到父元素的price的单向绑定
4.父组件value的值绑定到price
5.将父组件的value值通过props传递给子组件，实现了父组件的price到子组件value的单向绑定
小小的总结一下：
•v-bind只能实现单向绑定
•v-model（v-bind+触发的input事件）实现双向绑定
以上所述是小编给大家介绍的浅析Vue自定义组件的v-model ，希望对大家有所帮助！
相关推荐
-
vue 封装自定义组件之tabal列表编辑单元格组件实例代码
vue 封装自定义组件 tabal列表编辑单元格组件 <template> <div class="editable-cell"> <div class="editable-cell-input-wrapper" v-if='editable'> <el-input class="editInput" v-model="cellValue" placeholder="请输入内
-
vue.js指令v-model实现方法
V-MODEL 是VUE 的一个指令,在input 控件上使用时,可以实现双向绑定. 通过看文档,发现他不过是一个语法糖. 实际是通过下面的代码来实现的: <%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%> <!DOCTYPE html> <html lang="en">
-
Vue 进阶教程之v-model详解
Vue 官网教程上关于 v-model 的讲解不是十分的详细,写这篇文章的目的就是详细的剖析一下, 并介绍 Vue 2.2 v-model改进的地方,然后穿插的再说点 Vue 的小知识. 在 Vue 中,有许多方法和 Angular 相似,这主要是因为 Angular 是 Vue 早期开发的灵感来源.然而,Augular 中存在许多问题,在 Vue 中已经得到解决. v-model 用在 input 元素上时 v-model虽然很像使用了双向数据绑定的 Angular 的 ng-model,但
-
Vue结合原生js实现自定义组件自动生成示例
就目前三大前端主流数据驱动框架(vue,ng,react)而言,均具有创建自定义组件的api,但都是必须先做到事先写好挂载点,这个挂载点可以是原有静态元素标签也可以是自定义模板:对于多种组件通过同一数据流生成的,如果事先在页面上写好挂载点(mounted),然后通过dom操作去动态添加,会遇到类似这样一条错误提示信息:Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'.(-).这又是为何呢,下一
-
vue2 如何实现div contenteditable=“true”(类似于v-model)的效果
发现问题 在 vue2 中对表单控件有着良好的双向数据绑定机制,但是对于要特定实现某些功能的输入时,我们就不得不使用到 contenteditable="true" 的 div ,而在这个 div 上是使用 v-model 是没有效果的.那么问题就来了,输入是非常需要双向绑定的,这里的双向数据绑定该如何实现? 解决思路一:自定义指令 当然,说在这一段的前面,这种解决方式在 vue2 中是不行的,为什么这么说,因为现在去搜索这个问题绝大多数的搜索结果是这个,所以放在前面. 实现的原理以及
-
vue 2.0组件与v-model详解
前言 大家可能乍一看这个标题,可能会有疑问:v-model和组件也能扯到一起?在打算写这篇文章的时候,也是这么想的.咱们按简历的那一套STAR法则来梳理一下这篇文章: 情景[Situation]: 编写通用的输入组件时,子组件要绑定到父组件的某个变量上dataA,当父组件要拿到自组件的值时不能通过this.$children.xxx取值然后付给dataA, 而是父组件可以直接this.dataA就可以取到当前子组件最新值. 任务[Task]: 实现在父组件直接this.dataA就可以取到当前子
-
vue.js指令v-model使用方法
vue.js的一大功能便是实现数据的双向绑定,本文就表单处理时运用v-model指令实现双向绑定做一个介绍: v-model这个指令只能用在<input>, <select>,<textarea>这些表单元素上,所谓双向绑定,指的就是我们在js中的vue实例中的data与其渲染的dom元素上的内容保持一致,两者无论谁被改变,另一方也会相应的更新为相同的数据.这是通过设置属性访问器实现的.例如: var data = { name: "erik", g
-
Vue2.0利用 v-model 实现组件props双向绑定的优美解决方案
在项目中开始使用vue2来构建项目了,跟 vue1 很大的一处不同在于2 取消了props 的双向绑定,改成只能从父级传到子级的单向数据流,初衷当然是好的,为了避免双向绑定在项目中容易造成的数据混乱. 解决方案一 然后开始参考网上和github上的方案等等,发现很多解决方案是这样的 用data对象中创建一个props属性的副本 watch props属性 赋予data副本 来同步组件外对props的修改 watch data副本,emit一个函数 通知到组件外 这里以最常见的 modal为例子:
-
浅析Vue自定义组件的v-model
最近在学习vue,今天看到自定义事件的表单输入组件,纠结了一会会然后恍然大悟...官方教程写得不是很详细,所以我决定总结一下. v-model语法糖 v-model实现了表单输入的双向绑定,我们一般是这么写的: <div id="app"> <input v-model="price"> </div> new Vue({ el: '#app', data: { price: '' } }); 通过该语句实现price变量与输入值双
-
vue 自定义组件 v-model双向绑定、 父子组件同步通信的多种写法
上篇文章给大家介绍了浅析Vue自定义组件的v-model,大家可以参考下.接下来通过本文给大家介绍vue 自定义组件 v-model双向绑定. 父子组件同步通信的多种写法,具体详情如下所示: 父子组件通信,都是单项的,很多时候需要双向通信.方法如下: 1.父组件使用:msg.sync="aa" 子组件使用$emit('update:msg', 'msg改变后的值xxx') 2.父组件传值直接传对象,子组件收到对象后可随意改变对象的属性,但不能改变对象本身. 3.父组件使用: v-mo
-
web面试vue自定义组件及调用方式
引入: 由于项目需求, 部分相同的代码我们会封装成组件, 在需要使用的地方导入, 并以标签的形式书写在中, 但是在"vant"组件库中, "Dialog 弹出框"组件有2中使用方式 通常我们自定义组件, 一般也是通过方式二的形式使用, 今天介绍方式一如何使用 编码实现 以插件的形式使用组件 // 将要显示的组件导入 import mymodel from '../components/mymodel.vue' export default { install: fu
-
vue自定义组件实现v-model双向绑定数据的实例代码
项目中会遇到自定义公共组件供项目调用,正常情况可以使用 props定义参数接收父组件传的参数,然后通过子组件的$emits()方法回传数据给父组件. 类似如下: 父组件 <common-checkbox :checked="goodsSelected" class="left" :height="'16px'" :width="'16px'" @checkChange="checkChange">
-
在vue自定义组件中使用 v-model指令详情
目录 一.前言 1.技术点提前知 二.在自定义的vue组件中使用v-model 1.效果演示图 2.自定义组件代码示例 3.在父组件使用自定义组件 三.优写时刻 一.前言 如何实现在自定义的vue组件中使用v-model,. 起先觉得挺简单,事实也挺简单,但似乎又没那么简单.因为深谈这涉及指令原理.数据绑定实现原理. 1.技术点提前知 要想在自定义组件中使用v-model,使用上其实就简单几步,这里以自定义input组件为例. 关键步骤: 1.props的使用.在自定义的vue文件中,声明父组件
-
Vue 自定义组件 v-model 使用详解
目录 Vue2中使用 Vue3中使用 v-model 使用 modelValue 自定义 v-model 的使用的参数 多个 v-model 绑定 自定义v-model 的修饰符 Vue2中使用 一个组件上的 v-model 默认会利用名为 value 的 prop 和名为 input 的事件,但是像单选框.复选框等类型的输入控件可能会将 value attribute 用于不同的目的.model 选项可以用来避免这样的冲突: Vue.component('base-checkbox', { m
-
VUE 自定义组件模板的方法详解
本文实例讲述了VUE 自定义组件模板的方法.分享给大家供大家参考,具体如下: 先说下需求吧,因为客户的用户群比较大,如果需求变动,频繁更新版本就需要重新开发和重新发布,影响用户的体验,考虑到这一层就想到,页面展示效果做动态可配,需求更新时,重新配置一份模板录入到数据库,然后根据用户选择的模板进行展示. 关于页面展示做的动态可配,我是参考vue的Component组件方式,开始时可能会遇到组件定义后不能加载的情况,并在控制台如下错误:You are using the runtime-only b
-
使用form-create动态生成vue自定义组件和嵌套表单组件
使用form-create动态生成vue自定义组件和嵌套表单组件 [github]| [说明文档] maker.create 通过建立一个虚拟 DOM的方式生成自定义组件 生成 Maker let rule = [ formCreate.maker.create('i-button').props({ type:'primary', field:'btn' loading:true }) ] $f = formCreate.create(rule); 上面的代码是通过maker生成器动态生成一个
-
vue 自定义组件的写法与用法详解
三个技能,父组件 -> 子组件传值(props).子组件 -> 父组件传值(emit用来使这个独立的组件通过一些逻辑来融入其他组件中.举个具体点的例子,假如你要做一辆车,车轮是要封装的一个独立组件,props指的就是根据整个车的外形你可以给轮子设置一些你想要的且符合车风格的花纹,图案等:而$emit的作用则是让这些轮子能够和整辆车完美契合的运作起来. (1)使用props可以实现父子组件之间的传值 (2)使用this.$emit()可是实现子组件调用父组件的方法 一.在commponents文
-
Vue自定义组件的四种方式示例详解
四种组件定义方式都存在以下共性(血泪史) 规则: 1.组件只能有一个根标签 2.记住两个词全局和局部 3.组件名称命名中'-小写字母'相当于大写英文字母(hello-com 相当于 helloCom) 而对于在HTML中自定义组件的时候有4种写法,不过也只是殊途同归,都是用template属性对应的只有一个根标签的HTML代码. 1.全局组件 定义方式示例: Vue.component("hello-component",{ props:["message"], t