vue2.6.14项目使用@wangeditor/editor 5.1.16和@wangeditor/editor-for-vue报错：vue.esm.js?2b0e:619 [Vue warn]: $attrs is readonly vue.esm.js?2b0e:619 [Vue warn]: $listeners is readonly

[vickyliu95]

问题描述

在开发vue2.6.14项目使用@wangeditor/editor 5.1.16和@wangeditor/editor-for-vue报错：vue.esm.js?2b0e:619 [Vue warn]: $attrs is readonly vue.esm.js?2b0e:619 [Vue warn]: $listeners is readonly，并且什么都没有修改，直接按照官网引用也报错，如果新建一个页面单独使用示例demo的例子export default Vue.extend({}）不会报错，如果使用export default {}形式会报错

并且排查的时候@wangeditor/editor-for-vue1.0.2的vue版本已经确定也是2.6.14

wangEditor 版本

@wangeditor/editor 5.1.16和@wangeditor/editor-for-vue 1.0.2

是否查阅了文档 ？

（文档链接 www.wangeditor.com ）

是

最小成本的复现步骤

（请告诉我们，如何最快的复现该问题？）

1、新建一个vue页面，直接复制官网demo的模板 <template> <div style="border: 1px solid #ccc;"> <Toolbar style="border-bottom: 1px solid #ccc" :editor="editor" :defaultConfig="toolbarConfig" :mode="mode" /> <Editor style="height: 500px; overflow-y: hidden;" v-model="html" :defaultConfig="editorConfig" :mode="mode" @onCreated="onCreated" /> </div> </template>

2、复制官网demo的js部分，且书写方法去掉引用vue和 Vue.extend `

export default { components: { Editor, Toolbar }, data() { return { editor: null, html: '

hello

', toolbarConfig: { }, editorConfig: { placeholder: '请输入内容...' }, mode: 'default', // or 'simple' } }, methods: { onCreated(editor) { this.editor = Object.seal(editor) // 一定要用 Object.seal() ，否则会报错 }, }, mounted() { // 模拟 ajax 请求，异步渲染编辑器 setTimeout(() => { this.html = '

模拟 Ajax 异步设置内容 HTML

' }, 1500) }, beforeDestroy() { const editor = this.editor if (editor == null) return editor.destroy() // 组件销毁时，及时销毁编辑器 } } `

3、控制vue版本在2.6.14