自己封装一个v-model指令

在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>

你可能感兴趣的:(笔记)