无法从父组件中检索 TinyMCE 的内容答案

【问题标题】：Unable to retrieve TinyMCE's content from a parent component无法从父组件中检索 TinyMCE 的内容
【发布时间】：2021-02-27 02:35:03
【问题描述】：

我在他们的 Github 上问过这个问题，但到目前为止没有答案，所以我在这里试试运气。

我正在创建一个包含 TinyMCE 作为组件的表单；我的目标是能够通过整个网站作为主要的所见即所得来使用和重用这个组件。我导入它，给它一个v-model，我很高兴。

所以，它“有效”，例如，我可以通过 v-model 设置一个值，TinyMCE 会很好地显示它。但是，我似乎处于只写模式，因为我无法从中提取当前数据。

我最初为 Github 问题创建了一个 example，您可以在此处查看它，以便您对我所面临的问题有一个很好的了解。 TinyMCE 组件下有一个 textarea 具有相同的 v-model，只需尝试使用它并查看行为。

如果我在 TinyMCE 组件中声明一个 v-model，虽然一切正常，但我需要做什么将我的值传递给父组件？

提前致谢

【问题讨论】：

将编辑器包装在自定义组件中的原因是什么？您可以使用 $emit 将值发送到父组件
正如我在问题中所说，它是出于可重用性/DRY 目的，我要使用的配置比我提供的示例要复杂一些，而且我不想到处复制/粘贴.您能否提供一个我应该如何使用 $emit 的示例？提前致谢

【解决方案1】：

您也需要在编辑器本身上使用v-model，否则它只接收父值但无法更新它。但是，您不能为此使用道具value，因为道具can't be mutated。

在这里使用computed setter 和v-model 是一个很好的解决方案：

<editor
  api-key="qagffr3pkuv17a8on1afax661irst1hbr4e6tbv888sz91jc"
  v-model="model"
></editor>

保持 value 属性不变并添加计算：

computed: {
  model: {
    get() {
      return this.value;
    },
    set(val) {
      this.$emit('input', val);
    }
  }
}

计算的 setter 在获取时返回 prop，但发出而不是设置它。

【讨论】：