如何在 vue-quill 编辑器中发出多个参数？

Question

我正在使用 vue-quill 编辑器并尝试将其与自定义组件一起使用。这是我的代码。

WysiwygInput.vue

<template>
  <div class="my-3">
    <quill-editor
      :options="{
        placeholder: placeholder,
      }"
      v-on:change="($event) => $emit('change', $event.text)"
    ></quill-editor>
  </div>
</template>

Create.vue

<wysiwyg-input @change="setField" placeholder="Post Content" />

我想用一个额外的参数访问 quill-editor 值，就像这样。

<wysiwyg-input @change="setField($event.text, 'content')" placeholder="Post Content" />

那么 WysiwygInput.vue 上要改变什么？谢谢提前。

Codesandbox link: https://codesandbox.io/s/mystifying-benz-w8wgu?file=/src/FormFields.vue

Answer 1

您可以使用 $emit 方法发出许多参数：

 v-on:change="($event) => $emit('change', $event.text,param2,param3)"

并在父组件中添加处理程序，例如：

<wysiwyg-input @change="setField" placeholder="Post Content" />

...
setField(text,param2,param3){
 ...
}

如果您想将参数添加到父组件中发出的事件处理程序，您应该添加内联处理程序，如：

<wysiwyg-input @change="(text)=>setField(text, 'content')" placeholder="Post Content" />

如何在 vue-quill 编辑器中发出多个参数？

How to emit multiple parameter in vue-quill editor?

vue.js

vuejs2

vue-quill-editor

WysiwygInput.vue

Create.vue