正在组件之间更新同义词编辑器文本

Question

所以我使用Vue的tinymce编辑器。我在父组件中显示一个编辑器，然后在子组件中渲染另一个编辑器。该编辑器反应性地显示父组件中键入的内容。我遇到的问题是孩子落后了一个角色。我试着让编辑器内容在子级中成为自己的变量，而不是通过道具传递，但我无法找到一种方法来正确更新，同时保存tinymce添加的HTML标记。

这是我的：

父组件：

<Editor
v-model="body"
api-key=****
model-events="change keydown blur focus paste undo redo"
:init="{
height: 300,
menubar: false,
nonbreaking_force_tab: true,
branding: false,
init_instance_callback: function (editor) {
editor.on('Change', function (e) {
setHasChanges(); //this just says the form has updates
});
},
plugins: [
'advlist autolink lists link image charmap',
'searchreplace visualblocks code fullscreen',
'print preview anchor insertdatetime media',
'paste code help wordcount table'
],
toolbar:
'undo redo | formatselect | bold italic | 
bullist numlist | 
alignleft aligncenter alignright outdent indent | help'
}"
>
</Editor>

和孩子：

<Editor
:value="body"
api-key=***
model-events="change keydown blur focus paste undo redo"
disabled="true"
:init="{
menubar: false,
branding: false,
toolbar: false,
statusbar: false,
content_style:
'body { font-size: 12px; line-height: 1.35; margin: 10px auto 0; display: block; position: relative; height: 100px; overflow-x: hidden }'
}"
>
</Editor>

因此，如果父组件的编辑器有这个：

<h2>Here is a title!</h2>
<ul>
<li>and a bullet point</li>
<li>and another</li>
</ul>

孩子会显示：

这是一个标题

1. 和一个要点
2. 和另一个

如何在保留HTML标记的同时反应式更新子项？

Answer 1

所以我想明白了。我所要做的就是添加"；输入"；到父组件上编辑器的模型事件中。