您的当前位置:首页正文

vue中v-model的实现

2024-11-10 来源:个人技术集锦

v-model

 vue中的v-model 双向绑定事件专门用于 input组件,这只不是一种语法糖形式:input组件本身就有一个v-on绑定的input事件,每当输入框中的内容发生改变后。就会触发这个事件将当前框中的值赋值给value绑定的值

<input v-model='value'>
等价于
<input v-bind:value="value" v-on:input="value = $event.target.value">

 自定义v-model

         默认情况下v-model 只接受value属性和响应input事件,但是我们可以通过model属性来改变这种情况。

model 接受有两个属性:

  props:代替原来的value

  event:代替原来的input事件

    自定义组件

<template>
  <div>
    <input type="checkbox" :checked='checked' 
          @change='(e)=>$emit("change",e.target.checked)'>选项
  </div>
</template>
<script>
    export default {
        model: {
           prop: 'checked',
           event: 'change'
        }
        props: ['checked']
}
</script>

   使用

<customCheckbox v-model="checked" />

显示全文