浅析Vue自定义组件的v-model

作者:_wind 时间:2024-04-29 13:10:16 

最近在学习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 ,希望对大家有所帮助!

来源:http://www.cnblogs.com/wind-lanyan/archive/2017/11/26/7899428.html

标签:vue,自定义组件,v,model
0
投稿

猜你喜欢

  • 基于Python记录一场2023的烟花

    2022-01-08 19:57:07
  • python发腾讯微博代码分享

    2022-05-27 04:45:00
  • python爬虫之urllib,伪装,超时设置,异常处理的方法

    2022-07-23 23:47:10
  • Python设计模式中的创建型工厂模式

    2023-05-09 17:47:02
  • 用Python实现大文本文件切割的方法

    2021-12-19 23:16:53
  • asp如何用CDONTS发送带附件的邮件?

    2010-06-11 19:57:00
  • python爬虫 爬取超清壁纸代码实例

    2021-03-19 02:51:54
  • Mysql如何巧妙的绕过未知字段名详解

    2024-01-27 16:35:32
  • 一文详解如何用GPU来运行Python代码

    2022-02-26 17:49:30
  • Python Django的安装配置教程图文详解

    2023-06-29 08:17:12
  • Python中的getopt函数使用详解

    2023-04-07 03:08:00
  • 使用php-timeit估计php函数的执行时间

    2023-10-07 19:56:50
  • Python 装饰器使用详解

    2021-09-02 05:41:01
  • 在django中自定义字段Field详解

    2023-08-02 19:35:53
  • Python二维列表的创建、转换以及访问详解

    2022-08-09 16:03:15
  • Python实现圣诞树的多种方法

    2023-07-27 01:02:20
  • SQL Server中索引使用及维护

    2008-11-25 11:13:00
  • 浅谈视觉设计的准确性

    2007-09-18 17:59:00
  • Element-ui el-tree新增和删除节点后如何刷新tree的实例

    2023-07-02 17:03:52
  • python 解决print数组/矩阵无法完整输出的问题

    2021-05-13 00:45:15
  • asp之家 网络编程 m.aspxhome.com