在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值双向绑定