使用quill-editor出现：“避免直接改变 prop，因为每当父组件重新渲染时，值都会被覆盖。”的问题

Question

子组件关键代码：

<quill-editor class="editor"
                  ref="myQuillEditor"
                  v-model="content"
                  :options="editorOption"
                  @blur="onEditorBlur($event)"
                  @focus="onEditorFocus($event)"
                  @change="onEditorChange($event)">
    </quill-editor>

js部分：

props: {
    content: {
      type: String,
      default: () => {
        return null
      }
    },
  },

父组件：

<Editor :content="article.content"></Editor>

js部分

mounted () {
    const data = this.$route.query.item
    // 打开页面时候渲染值
    if (data) {
      this.article.title = data.title
      this.article.content = data.content
      this.article.belong = data.typeid
      this.article.readAuthorize = data.readAuthorize
    } else {
      // 测试
      console.log(data)
    }
  },

我做的是一个文章发表界面，因为涉及到发布文章和编辑文章两个功能，所以在调用发布编辑接口时候需要传入一些值，父组件mounted部分就想实现这个功能，但是我在运行测试的时候打开新页面出现了以下报错：

整不明白了，对父子间通信还不太熟的小 白操作起了富文本框，很是苦恼啊！麻烦大伙解答一下疑惑，谢谢！

Answer 1

可以在子组件里为content重新赋值，绑定新的值，然后监听值改变，改变了就用this.$emit()向父组件传改变的值，然后在父组件中关联的方法为content赋值。报红我理解的是不要在子组件中直接修改父组件的值