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

Question

下面是我的代码。

父.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()
  },
}

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

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

我找不到用 computed 的 html 做任何事情的方法。

请告诉我如何在父组件中实现子组件（tiptap.vue）的编辑器输入作为预览。

score 1 · Accepted Answer

您可以将一个观察者添加到您的html计算属性中，$emit并将其内容添加到父级。

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

然后你的父母可以听@onHtmlChanged：

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

注意：可能建议您对事件进行去抖动以防止在每次击键时发出更改

1 回答 1