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

Below is my code.

parent.vue

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

tiptap.vue

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

and

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

In such a structure, how can I send the content input value of the child component to the parent component?

In order to implement the preview function in the parent component, the content of the child component must be fetched in real time.

I couldn't find a way to do anything with the html of computed .

Please tell me how to implement editor input of child component (tiptap.vue) as preview in parent component.

CodePudding user response：

You could add a watcher to your html computed property to $emit its content to parent.

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

Then your parent can listen to @onHtmlChanged :

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

NOTE : It might be recommended that you debounce your event to prevent emitting a change at each keystroke