在 VueJS 中访问子组件内的槽函数

Question

我正在尝试使用 tiptap。实际上它有效，但我想做的是从 editor 组件外部访问“isActive”插槽，但我不知道该怎么做。

这是一个codesandbox示例：https://codesandbox.io/s/v07xnxo807?file=/src/App.vue

您看到编辑器组件是从 App.vue 调用的。 Editor 组件中的按钮根据“isActive”槽函数激活。我想要的是访问此插槽以从 App.vue 获取例如 isActive.bold() 的值，以更新您可以在 Vuetify 上找到的“多个按钮”的模型：https://vuetifyjs.com/fr-FR/components/button-groups/

这里是我可以拥有的例子：

<editor-menu-bar :editor="editor" v-slot="{ commands, isActive }">
  <v-btn-toggle
    v-model="toggle_multiple"
    dense
    background-color="primary"
    dark
    multiple
    class="my-2"
  >
    <v-btn :color="isActive.bold()?'red':'green'" @click="commands.bold">
      <v-icon>mdi-format-bold</v-icon>
    </v-btn>
    <v-btn @click="commands.italic">
      <v-icon>mdi-format-italic</v-icon>
    </v-btn>
    <v-btn @click="commands.strike">
      <v-icon>mdi-format-strikethrough</v-icon>
    </v-btn>
    <v-btn @click="commands.underline">
      <v-icon>mdi-format-underline</v-icon>
    </v-btn>
    <v-btn @click="commands.blockquote">
      <v-icon>mdi-format-quote-open</v-icon>
    </v-btn>
  </v-btn-toggle>
</editor-menu-bar>

并且 toggle_multiple 将根据不同的“isActive”函数值进行计算。

我已经试过了：

computed: {
  toggle_multiple: function () {
    let t = []
    if (editor)  {console.log("Bold: "+editor.isActive.bold())}
    return t
  }
},

但是我收到这个错误：error 'editor' is not defined

我愿意接受任何建议。提前致谢。

Answer 1

属性 isActive 存储在 tiptap 实例中（在你的例子中是 this.editor）：

在HTML中：

<div>{{editor.isActive.bold()}}</div>

在 JS 中：

<div>{{toggle_multiple}}</div>

computed: {
  toggle_multiple () {
    // Keep in mind, other properties like ".isActive.heading()" will be undefined
    // until you import the extension for it.
    // So the function "heading" below exists only if you're using that extension
    // console.log(this.editor.isActive.heading({ level: 2 })
    return this.editor.isActive.bold()
  }
}

在 VueJS 中访问子组件内的槽函数

Access to a slot function inside a child component in VusJS

vue.js

tiptap