前端之家收集整理的这篇文章主要介绍了
vue插件实现v-model功能，
前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。
最近在开发自己的富文本编辑器插件，在开发中遇到了很多问题其中我觉得比较好的问题就是在你定义的插件中实现双向绑定。就好像input中v-model的功能类似。
v-model语法：
在vue中我们实现表单的双向绑定时代码一般时这样写的：
可以通过这样的方式实现value的值和输入框中的值双向绑定了。
事实上v-model只是一个语法糖，他的真正实现是这样的：
以上代码分几个步骤：
1.将输入框的值绑定到变量上，这个是单向绑定，意味着改变变量的值可以改变输入框的值，但是改变输入框的值不能改变变量的值
2.监听input事件（input输入框都有该事件，当输入内容时自动触发该事件），当输入框输入内容就单向改变变量的值了
自定义编辑器双向绑定
这个是插件的写法：content是双向绑定的值 height是指编辑器的高度
插件vue的写法：
Box" ref="editor" contenteditable v-html="contentHtml" @input="changeText">
内容
contentHtml: this.value || this.value === 0 ? this.value : '
',// 是否在编译
isLocked: true,// 光标位置
lastEditRange: null
}
},watch: {
value (val) {
if (!this.isLocked) {
this.contentHtml = this.value;
}
}
}
Box" ref="editor" contenteditable v-html="contentHtml" @input="changeText" @focus="focusEditor" @blur="blurEditor">
// 编辑器失去焦点
blurEditor (event) {
this.isLocked = false
},// 编辑器获得焦点
focusEditor (event) {
this.isLocked = true
},
