v-model

RiverLi 发布于2019-08-21 11:53 / 2537人阅读

摘要：用法中比较基础的用法是在表单控件中，创建双向数据绑定，能够更新数据并负责监听用户的输入事件实例代码这里是监听了输入框的事件，并将其赋值给。找到的父组件就是组件，里面没有注册任何方法只是了属性。因为在也是利用了的语法糖。

Vue v-model 用法

vue 中v-model 比较基础的用法是在表单控件中，创建双向数据绑定，能够更新数据并负责监听

用户的输入事件

实例代码

    
    Message is: {{ message }}
    // 这里是监听了输入框的input 事件，并将其value赋值给message。
    ==》

详细解释

这里根据文档上看，指出v-model 只是一种语法糖，同样使用checkbox 时，我们也使用了v-model 来更新当前复选框是不是在被选中状态，这里监听的是change 事件，

在checkbox 中，就可以使用value属性去做其它事情，
v-model 指令对于不同的 type 类型会绑定在不同的事件上，查看vue.common.js 中的代码就可以发现：

    if (el.component) {
        genComponentModel(el, value, modifiers);
        // component v-model doesn"t need extra runtime
        return false
      } else if (tag === "select") {
        genSelect(el, value, modifiers);
      } else if (tag === "input" && type === "checkbox") {
        genCheckboxModel(el, value, modifiers);
      } else if (tag === "input" && type === "radio") {
        genRadioModel(el, value, modifiers);
      } else if (tag === "input" || tag === "textarea") {
        genDefaultModel(el, value, modifiers);
      } else if (!config.isReservedTag(tag)) {
        genComponentModel(el, value, modifiers);

checkbox

v-model会根据input 标签中的type 类型不同，相应的使用不同的方法。

再看到 type=“checkbox” 对应的方法，

    this.listener = function () {
        var model = self._watcher.value;   // 获取绑定指令 的 数组，在chang 事件发生时，时刻操作value 数组的变化
        if (isArray(model)) {
          var val = self.getValue();
          if (el.checked) {
            if (indexOf(model, val) < 0) {     //  checkbox 已经被勾选后，首先在model数组中查找有没有被勾选checkbox 的对应value，没有的的话就加入进去，这里也可以推断出在v-model 绑定在一组checkbox中时，可以记录所有的选中的值。
              model.push(val);
            }
          } else {                           // checkbox 被取消，就在model中 删除checkbox 对应的value,
            model.$remove(val);
          }
        } else {
          self.set(getBooleanValue());
        }
      };
      //   将this.listener 函数绑定到 input　的　chang 事件中去， 在checkbox 发生变化时，
      this.on("change", this.listener);

上面也是从vue.js 中截取的代码，就可以用来解释官网中这段实例:


Jack

John

Mike


Checked names: {{ checkedNames }}

里面的checkedNames 可以保存所有已经被勾选的input 对应的value ,还不会有重复的值。

ElementUI elCheckboxGroup

官方示例
然后就联想到了ElementUI中和两个组件嵌套在一起使用的场景

checkAll数组中就保存着内部 elCheckbox 组件对应所有已经勾选的数组，

查看ElementUI 源码中 checkbox.vue 对应文件（只截取对应功能片断）：

checkbox.vue

template:
  
   
script:
    methods:{
           handleChange(ev) {
            this.$emit("change", ev);
            if (this.isGroup) {
              this.$nextTick(_ => {
                this.dispatch("ElCheckboxGroup", "change", [this._checkboxGroup.value]);  // 自定义dispatch 方法，向上遍历找到parent组件 名字是ElCheckboxGroup 的父组件，并触发对应的change事件。
          });
        }
      }
      }

this.dispatch 找到的父组件就是 checkboxGroup组件，

 checkboxGroup.vue
   
   template   
   
     
     
   

  //里面没有注册任何 change 方法

script :

   watch: {
      value(value) {
        this.dispatch("ElFormItem", "el.form.change", [value]);
      }
    }
   // 只是watch 了value 属性。

因为在　

===

也是利用了 v-model 的语法糖。

混合云 idc机房托管

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/87251.html

Vue.js-表单与v-model

摘要：学习笔记表单与表单与提供了指令，用于在表单类元素上双向绑定数据。事实上，也是一个特殊的语法糖，只不过它会在不同的表单上智能处理。选择的项复选框复选框单独使用时，也是用绑定一个布尔值。复选框选择列表当选中时，是一个，所以。学习笔记：表单与v-model 表单与v-model Vue.js提供了v-model指令，用于在表单类元素上双向绑定数据。使用v-model后，表单控件显示的值...

jollywing 2019-08-23 16:02 评论0 收藏0
父子组件传值及v-model实现通信

摘要：子组件也属于当前实例。监听钩子函数的场景使用的不多，但是还是要知道的。可以获取到父组件传递的除和外的所有自定义属性。一. 父组件向子组件传值创建parent和child组件，并在parent中注册child组件在父组件调用子组件标签中添加一个自定义属性(msg)， im...

lwx12525 2019-08-23 17:51 评论0 收藏0
iView2 来了，全面支持 Vue.js 2.x

摘要：来了两个星期的紧张开发，终于发布了支持的版本。整体性能也大幅度提升。报名费用元，报名地址微信扫描二维码更新日志目前已发布至，文档还需一段时间，但很快会发布新版本的来支持。 showImg(https://segmentfault.com/img/remote/1460000008640063?w=1600&h=900); iView2 来了两个星期的紧张开发，iView 终于发布了支...

YFan 2019-08-21 11:34 评论0 收藏0
巧妙运用v-model实现父子组件传值

摘要：如何巧妙利用实现父子组件传值通常子组件某个变量更新，并需要告知父组件时，需要子组件触发事件并父组件监听该事件。但是熟悉上面的实现原理后，我们可以巧妙地运用这一原理在内部使用不同的属性为不同的输入元素并抛出不同的事件。 v-model介绍熟悉Vue的小伙伴们都知道 v-model 是Vue的一个很大的特色，可以实现双向数据绑定。但本质上呢，它不过是语法糖，它负责监听用户的输入事件以更新...

张金宝 2019-08-23 16:44 评论0 收藏0