在VusJS中访问子组件内部的插槽功能

问题描述

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

以下是一个代码框示例：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>

然后将根据不同的“ isActive”函数值来计算toggle_multiple。

我已经尝试过：

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

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

我愿意接受任何建议。预先感谢。

解决方法

属性isActive存储在自费实例中（在您的情况下为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()
  }
}

tiptap vue.js