博主:DongJiang
码龄:7年
等级:LV.22级
内容:316
今日访问:2312
访问总量:5936
博客简介:学习与分享
博客创建时间:2018-04-12
博客主页 立即前往
赞助位
成为赞助商

vue指令v-model的原理如何实现?

来源: 2024-05-18 10:29:53 播报

v-model原理:

原生 input 元素若是text/textarea类型,使用 value 属性和 input 事件。

原生 input 元素若是radio/checkbox类型,使用 checked属性和 change 事件。

原生 select 元素,使用 value 属性和 change 事件。

input 元素上使用 v-model 等价于

<input :value="message" @input="message = $event.target.value" />

实现自定义组件的 v-model

自定义组件的v-model使用prop值为value和input事件。若是radio/checkbox类型,需要使用model来解决原生 DOM 使用的是 checked 属性 和 change 事件,如下所示。

// 父组件
<template>
<base-checkbox v-model="baseCheck" />
</template>
// 子组件
<template>
<input type="checkbox" :checked="checked" @change="$emit('change', $event.target.checked)" />
</template>
<script>
export default {
model: {
  prop: 'checked',
  event: 'change'
},
prop: {
  checked: Boolean
}
}
</script>
原文出处:
版权声明:本文来源地址若非本站均为转载,若侵害到您的权利,请及时联系我们,我们会在第一时间进行处理。