vue插件实现v-model功能

最近在开发自己的富文本编辑器插件，在开发中遇到了很多问题其中我觉得比较好的问题就是在你定义的插件中实现双向绑定。就好像input中v-model的功能类似。

v-model语法：

在vue中我们实现表单的双向绑定时代码一般时这样写的：

可以通过这样的方式实现value的值和输入框中的值双向绑定了。

事实上v-model只是一个语法糖，他的真正实现是这样的：

以上代码分几个步骤：

1.将输入框的值绑定到变量上，这个是单向绑定，意味着改变变量的值可以改变输入框的值，但是改变输入框的值不能改变变量的值

2.监听input事件（input输入框都有该事件，当输入内容时自动触发该事件），当输入框输入内容就单向改变变量的值了

自定义编辑器双向绑定

这个是插件的写法：content是双向绑定的值 height是指编辑器的高度

插件vue的写法：

在div中设置contenteditable属性时把div设置成可编辑的输入框，v-html是给编辑器单向绑定变量contentHtml值，input方法获取编辑器的内容并且返回给父元素的input方法：

其他问题：

光是这样是不能够解决问题的，编辑器你会出现每次输入的时候都会跳到开头位置：怎么解决呢？不多说上代码：

写到这里大家应该一头雾水这样写有什么用：因为还少了一些代码：

需要给插件添加两个方法判断编辑器是否正在编辑内容，如果正在编辑中父组件绑定的值不让他重新渲染子组件，这样编辑器中的内容就不会重新赋值了，这样光标就不会每次都跑到前面去了。

小小的总结一下：

•v-bind只能实现单向绑定 •v-model（v-bind+触发的input事件）实现双向绑定

总结

以上所述是小编给大家介绍的vue插件实现v-model功能。编程之家 52php.cn 收集整理的教程希望能对你有所帮助，如果觉得编程之家不错，可分享给好友！感谢支持。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!