如何从父级引用 VueJS 子组件

Question

在 VueJS 3 中，假设我有以下用于小型“html 块编辑器”的组件模板：

<!--Block Editor-->
<template>
    <div>
        <content-block-ui-frame>
            <content-block-type1></content-block-type1>
        </content-block-ui-frame>

        <content-block-ui-frame>
            <content-block-type2></content-block-type2>
        </content-block-ui-frame>

        <content-block-ui-frame>
            <content-block-type3></content-block-type3>
        </content-block-ui-frame>
    </div>
</template>

content-block-ui-frame 看起来像这样：

     <template>
        <div class="container">
            <slot />          
        </div>
     </template>

所以，slot 包含content-block-typeX 组件的一个实例。
在这个content-block-ui-frame 组件中，我如何引用开槽组件？

我需要获取开槽的content-block-typeX 的数据以及方法。那可能吗？我已尝试使用 ref，但似乎无法正常工作。

目标是将特定块的数据结构和方法封装在块组件本身内，并以某种方式将它们发布到包含块编辑器以进行编辑/保存/等。

Answer 1

一种解决方案可能是为块编辑器中的每个 content-block-ui-frame 创建一个 ref，并将 ref 作为 prop 传递给正确的 content-block-ui-frame。 这就是你提到你已经用 refs 尝试过的方法吗？

编辑：我能够创建一个最小的示例，其中将 ContentBlock ref 作为道具传递给 ContentblockUiFrame 可以按预期工作。 ContentBlockUIFrame 组件可以使用 ContentBlock 的方法。

查看我的示例here

import ContentBlock from "./components/ContentBlock.vue";
import ContentBlockUiFrame from "./components/ContentBlockUiFrame.vue";
import { ref } from "vue";

export default {
  components: { ContentBlock, ContentBlockUiFrame },
  setup() {
    const contentBlockOne = ref(null);
    const contentBlockTwo = ref(null);

    return {
      contentBlockOne,
      contentBlockTwo,
    };
  },
};

<template>
  <div class="block-editor">
    <content-block-ui-frame :content-block="contentBlockOne">
      <content-block content="Content one" ref="contentBlockOne" />
    </content-block-ui-frame>

    <content-block-ui-frame :content-block="contentBlockTwo">
      <content-block content="Content two" ref="contentBlockTwo" />
    </content-block-ui-frame>
  </div>
</template>