时间戳

首页 > 解决方案 > 如何在 vue-quill 编辑器中发出多个参数？

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

问题描述

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

所见即所得输入.vue

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

创建.vue

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

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

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

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

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

标签： vue.jsvuejs2vue-quill-editor

解决方案

您可以使用方法发出许多参数$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" />

推荐阅读