我正在使用 tiptap 。如何从子组件预览到父组件

Question

下面是我的代码。

parent.vue

<client-only>
  <EditorTiptap v-model="content" />
</client-only>

tiptap.vue

<div class="editor-panel">
  <editor-content :editor="editor" />
</div>

和

computed: {
  html () {
    if (!this.editor) return ''
    return this.editor.getHTML()
  },
}

在这样的结构中，如何将子组件的内容输入值传给父组件？

为了在父组件中实现预览功能，必须实时拉取子组件的内容。

我找不到对计算的 html 做任何事情的方法。

请告诉我如何将子组件 (tiptap.vue) 的编辑器输入实现为父组件中的预览。

Answer 1

您可以将 watcher 添加到您的 html 计算属性到 $emit 其内容到 parent。

watch: {
    html: function (val) {
      this.$emit('onHtmlChanged', html)
    },
}

那么你的 parent 可以收听 @onHtmlChanged :

<client-only>
  <EditorTiptap v-model="content" @onHtmlChanged="doSomething" />
</client-only>

注意：可能建议您您的事件以防止在每次击键时发出变化

I am using tiptap . How to make a preview from child component to parent component