最近在開發自己的富文本編輯器插件，在開發中遇到了很多問題其中我覺得比較好的問題就是在你定義的插件中實現雙向綁定。就好像input中v-model的功能類似。
v-model語法：
在vue中我們實現表單的雙向綁定時代碼一般時這樣寫的：
<input type="text" v-model="value" style="line-height: 30px;">data () { return { value: '222' }}可以通過這樣的方式實現value的值和輸入框中的值雙向綁定了。
事實上v-model只是一個語法糖，他的真正實現是這樣的：
<input type="text" :value="value" @input="value=$event.target.value">
以上代碼分幾個步驟：
1.將輸入框的值綁定到變量上，這個是單向綁定，意味著改變變量的值可以改變輸入框的值，但是改變輸入框的值不能改變變量的值
2.監聽input事件（input輸入框都有該事件，當輸入內容時自動觸發該事件），當輸入框輸入內容就單向改變變量的值了
自定義編輯器雙向綁定
這個是插件的寫法：content是雙向綁定的值 height是指編輯器的高度
<editor v-model="content" :height="editorHeight"></editor>
插件vue的寫法：
<div v-bind:style="{height: height}" class="editor-box" ref="editor" contenteditable v-html="contentHtml" @input="changeText"></div>在div中設置contenteditable屬性時把div設置成可編輯的輸入框，v-html是給編輯器單向綁定變量contentHtml值，input方法獲取編輯器的內容并且返回給父元素的input方法：
changeText () { const htmlString = this.$refs.editor.innerHTML this.$emit('input', htmlString) },其他問題：
光是這樣是不能夠解決問題的，編輯器你會出現每次輸入的時候都會跳到開頭位置：怎么解決呢？不多說上代碼：
props: { value: { type: String, default: '' }, height: { type: String, default: 'auto' } },data () { return { // 編輯器內容 contentHtml: this.value || this.value === 0 ? this.value : '<div><br></div>', // 是否在編譯 isLocked: true, // 光標位置 lastEditRange: null } }, watch: { value (val) { if (!this.isLocked) { this.contentHtml = this.value; } } }寫到這里大家應該一頭霧水這樣寫有什么用：因為還少了一些代碼：
<div v-bind:style="{height: height}" class="editor-box" ref="editor" contenteditable v-html="contentHtml" @input="changeText" @focus="focusEditor" @blur="blurEditor"></div> // 編輯器失去焦點 blurEditor (event) { this.isLocked = false }, // 編輯器獲得焦點 focusEditor (event) { this.isLocked = true },需要給插件添加兩個方法判斷編輯器是否正在編輯內容，如果正在編輯中父組件綁定的值不讓他重新渲染子組件，這樣編輯器中的內容就不會重新賦值了，這樣光標就不會每次都跑到前面去了。
小小的總結一下：
•v-bind只能實現單向綁定
•v-model（v-bind+觸發的input事件）實現雙向綁定
總結
以上所述是小編給大家介紹的vue插件實現v-model功能，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持！
新聞熱點
疑難解答
