在elementui表單中實現對vue-quill-editor富文本編輯器內容的綁定

1、v-model(表單標簽雙向綁定指令)

v-model相當於:value=""和@input=""的結合

代碼1：
<input type="text" v-model="val"> {{'input的值：'+val}} <div> <button @click="val++">val++</button> </div>

實現效果相當於代碼2:
`<input type="text" :value="val" @input="val=$event.target.value">
{{'input的值：'+val}}

val++

`

其中：
$event 指代當前觸發的事件對象。

$event.target 指代當前觸發的事件對象的dom

$event.target.value 就是當前dom的value值

2、在elementui的表單組件中用v-model綁定editor組件

表單組件：其中v-model如上可以拆分成：和@的組合

<el-form ref="form" :model="form" label-width="100px">
   <el-form-item label="活動內容:" prop="content">
      <Editor ref="myQuillEditor" v-model="form.content"></Editor>
   </el-form-item>
</el-form>

quill-editor組件：

<quill-editor v-model="content" @change="$emit('input',content)" ref="myQuillEditor" style="height:260px;" :options="editorOption">
</quill-editor>
<script>
export default {
    components: {
      quillEditor
    },
    props:['value'],
    watch:{
      value:function(){
        this.content = this.value;
      }
    },
    data(){
      return {
        content:this.value
       }
    }
}
</script>

其中遇到的問題：

1、通過props單向傳值給子組件，在子組件修改props的值會報錯，采用迂回的方法用一個局部變量復制傳遞下來的值
2、通過監聽value屬性使content與value值雙向綁定