v-model的实现原理

v-model

  1. v-bind绑定响应式数据
  2. 通过@input触发事件获取当前 $event.target.value,然后赋值给当前变量
<template>
  <div>
    <input @input="handleInput" />
    <div>
        实时监听: {{ message }}
    </div>
  </div>
</template>

<script>
    export default {
        data(){
            return {
                message:""
            }
        },
        methods:{
            handleInput(event){
                this.message = event.target.value
            }
        }
    }
</script>
vue
本作品采用《CC 协议》,转载必须注明作者和本文链接
讨论数量: 5

贴的代码无法运行,比较浅层的 v-model 原理应该是 emit('change', event.target.value),参照官方文档:将原生事件绑定到组件

2周前 评论

@wj2015 默认是input吧,v-model.lazychange

2周前 评论

@yimijianfang 有段时间没写这个了,不过看文档写的一直是 change,得空尝试

2周前 评论

你这个标题在误导别人吗 :joy:

1周前 评论

还以为是底层代码实现。。。

1周前 评论

讨论应以学习和精进为目的。请勿发布不友善或者负能量的内容,与人为善,比聪明更重要!