vue自定义组件之v-model

官方文档地址
v-model大多用于input组件,默认会利用名为 value 的 prop 和名为 input 的事件,但是像单选框、复选框等类型的输入控件可能会将 value 特性用于不同的目的
可以使用组件的model来自定义prop和事件
自定义checkbox组件

<template>
    <div>
        <label>我是label</label>
        <input type="checkbox" v-on:change="$emit('callBack', $event.target.checked)" v-bind:checked="c" />
    </div>
</template>

<script>
    export default {
        name: "ModelDemo",
        props: {
            c: Boolean
        },
        model: {
            prop: 'c',
            event: 'callBack'
        },
    }
</script>

父组件

<template>
    <div>
        <model-demo v-model="checked" ></model-demo>
    </div>
</template>

<script>
    import ModelDemo from "@/components/ModelDemo";
    export default {
        name: "home",
        components: {
            ModelDemo
        },
        data: () => ({
            checked: true
        }),
        watch: {
            checked(n, o){
                // eslint-disable-next-line no-console
                console.log(n)
                // eslint-disable-next-line no-console
                console.log(o)
            }
        }
    }
</script>

父组件中通过v-model将data中的checked传给自定义组件,自定义组件通过model的prop属性将接收到的checked赋值给props的c,自定义组件再通过v-bind将input标签的checked和props的c进行绑定。
自定义组件中model的event是一个回调函数,当checkbox状态发生变化时,会执行这个回调函数,并将状态传给父组件v-model绑定的checked

下面是vue处理model的源码,中文注释为笔者自己加的

// transform component v-model info (value and callback) into
// prop and event handler respectively.
function transformModel (options, data) {
  var prop = (options.model && options.model.prop) || 'value';//如果没有设置model.prop,默认取名为value的prop
  var event = (options.model && options.model.event) || 'input'//如果没有设置model.event,默认取名为input的事件回调函数
  ;(data.attrs || (data.attrs = {}))[prop] = data.model.value;
  var on = data.on || (data.on = {});
  var existing = on[event];
  var callback = data.model.callback;
  if (isDef(existing)) {
    if (
      Array.isArray(existing)
        ? existing.indexOf(callback) === -1
        : existing !== callback
    ) {
      on[event] = [callback].concat(existing);
    }
  } else {
    on[event] = callback;
  }
}
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 什么是组件? 组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素,封装...
    youins阅读 9,533评论 0 13
  • Vue 实例 属性和方法 每个 Vue 实例都会代理其 data 对象里所有的属性:var data = { a:...
    云之外阅读 2,244评论 0 6
  • 前段时间出来面试,有一个面试老师问我v-model是什么,我回答说其实是组件里props中的value的值和往父组...
    乌罗阅读 1,294评论 0 4
  • VUE介绍 Vue的特点构建用户界面,只关注View层简单易学,简洁、轻量、快速渐进式框架 框架VS库库,是一封装...
    多多酱_DuoDuo_阅读 2,752评论 1 17
  • 组件注册 组件名 在注册一个组件的时候,我们始终需要给它一个名字。 该组件名就是Vue.component的第一个...
    oWSQo阅读 409评论 0 1