知道vue中的v-model是怎样运作的吗
2019-03-19 本文已影响0人
忘了叫啥咋滴这个名称还被占用了
v-model是用来做双向绑定的，这个大家都都知道，可是它是如何实现双向绑定的呢
<input v-model="abc">
将这个写法，分解一下，相当于如下：
<input :value="abc" @input="abc=$event.target.value">
下面这种写法，很清楚的可以看出v-model中的abc属性是如何修改的
当input事件触发后，通过事件对象，获取当前事件触发对象的值，赋值给abc，这样abc就实现了双向绑定
v-model不仅可以用在input textarea select这样的标签上 ， 还可以用于自定义组件上 原理同上
eg：
html：
<template>
<div>
<Box v-model="abc"></Box>
<p>{{abc}}</p>
</div>
</template>
js:
<script>
import Vue from "vue";
Vue.component("Box", {
template: `<div><input @input="$emit('input',$event.target.value)"></div>`
});
export default {
data() {
return {
abc: "",
};
}
};
</script>
