如何从父组件引用 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 但似乎无法正常工作。

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

Answer 1

一个解决方案可能是在块编辑器中为每个内容块-ui-帧创建一个引用，并将引用传递给正确的内容块-ui-帧作为道具。当你提到你已经用 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>

如何从父组件引用 VueJS 子组件

How to reference a VueJS child component from a parent

vue.js

vue-component