自己封装一个v-model指令

羽公子

于 2018-12-17 09:16:27 发布

阅读量2.3k

点赞数 1

分类专栏：笔记文章标签： Vue

本文链接：https://blog.youkuaiyun.com/qq_35333936/article/details/85043796

版权

笔记专栏收录该内容

31 篇文章

订阅专栏

本文探讨了如何在Vue.js中封装一个自定义的v-model指令，揭示了其背后的双向绑定原理。从ViewModel层到View层，详细阐述了v-model的工作流程和实现细节。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在Vue.js中我们通过v-model可以轻松实现双向绑定，然而这种效果是如何实现的呢？
首先是vm层

Vue.component('m-input',{
	template:"#m-input",
	props:['username'],
	data(){
		return {}
	},
})
var vm=new Vue({
	el:"#main",
	data:{
		username:''
	},
})

视图层（v层）

<div id="main">
	<m-input @input="username=$event" :username='username'></m-input>
</div>
<template id="m-input">
	<div>
		<input type="text" @input="$emit('input',$event.target.value)" :value='username'>
	</div>
</template>