子组件关键代码:
<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部分就想实现这个功能,但是我在运行测试的时候打开新页面出现了以下报错:
可以在子组件里为content重新赋值,绑定新的值,然后监听值改变,改变了就用this.$emit()向父组件传改变的值,然后在父组件中关联的方法为content赋值。报红我理解的是不要在子组件中直接修改父组件的值