v-model是vue的一个语法糖,限定在input和textarea等这种表单元素中,官方网站所给的事例也是仅限于表单组件

Vue.component('base-checkbox', {
 model: {
  prop: 'checked',
  event: 'change'
 },
 props: {
  checked: Boolean
 },
 template: `
  <input
   type="checkbox"
   v-bind:checked="checked"
   v-on:change="$emit('change', $event.target.checked)"
  >
 `
})
<base-checkbox v-model="lovingVue"></base-checkbox>

如今大家假如想把v-model采用除表单以外的自定组件中,该如何使用呢,实际上官方网站所给的事例也较为清楚了,仅仅假如一板一眼得话,那么就限制住了,没有错说的是我-.-.

<!--封裝的类弹出窗口组件-->
<template>
  <div>
    <div v-show="value">它是v-model的弹出窗口组件</div>
  </div>
</template>
<script>
export default {
  props:{
    value:{
      type:Boolean,
      default:false
    }
  }
}
</script>
<!--父组件-->
<template>
  <div>
    <v-model v-model="value"></v-model>
    <button @click="value=true">点一下显示信息</button>
    <button @click="value=false">点一下消退</button>
  </div>
</template>
<script>
import VModel from "./Vmodel"
export default {
  components:{VModel},
  data:function(){
    return {
      value:true
    }
  }
}
</script>

实际上那样父组件这里早已能够 根据v-model对显示信息和消退开展操纵了,可是封裝组件的 value 这一特性名是不可以改动的,务必叫 value ,叫 value1 也不就行了

props:{
    value1:{ //无效
      type:Boolean,
      default:false
    }
  }

缘故,看源代码

function transformModel (options, data: any) {
 const prop = (options.model && options.model.prop) || 'value' //子组件不会有options.model,默认设置给value
 const event = (options.model && options.model.event) || 'input'//event="input"
 ;(data.attrs || (data.attrs = {}))[prop] = data.model.value
 const on = data.on || (data.on = {})
 const existing = on[event] //undefined
 const callback = data.model.callback //f()
 if (isDef(existing)) { //false
  if (
   Array.isArray(existing)
    ? existing.indexOf(callback) === -1
    : existing !== callback
  ) {
   on[event] = [callback].concat(existing)
  }
 } else {
  on[event] = callback //把回调函数取值给监视的涵数
 }
}

so,大家就可以再加上model特性,开展编码改动

<template>
  <div>
    <div v-show="value">它是v-model的弹出窗口组件</div>
    <div @click="cancelClick">组件內部启用</div>
  </div>
</template>
<script>
export default {
  props:{
    value:{
      type:Boolean,
      default:false
    },
    model:{
      prop:"value",
      event:'change'
    }
  },
  methods:{
    cancelClick:function(){
      //內部启用这一方式 能够 开展操纵
      this.$emit("change",false)
    }
  }
}
</script>

自然大家还可以根据model特性,对value这一特性名开展改动,也是完成一样的实际效果

bool:{
    type:Boolean,
    default:false
  },
model:{
  prop:"bool",
  event:'change'
}

留意假如灭能加model特性得话,对props的value特性名改动得话,是没实际效果的,默认设置的v-model的event默认设置改动的還是value

const prop = (options.model && options.model.prop) || 'value' //子组件不会有options.model,默认设置给value
 const event = (options.model && options.model.event) || 'input'//event="input"

小结

之上上述是我给大伙儿详细介绍的Vue中的 v-model组件封裝(相近弹出窗口组件),期待对大伙儿有一定的协助,假如大伙儿有一切有意者帮我留言板留言,我会立即回应大伙儿的。在这里也特别感谢大伙儿对网址的适用!
如果你觉得文中对给你协助,热烈欢迎转截,劳烦标明出處,感谢!