[Vuejs]-How to reference a VueJS child component from a parent

by

0👍

✅

One solution might be creating a ref for each content-block-ui-frame in the block-editor, and passing the ref to the right content-block-ui-frame as a prop.
Is this the approach you meant when you mentioned you already tried it with refs?

EDIT: I was able to create a minimal example where passing the ContentBlock ref as a prop to the ContentblockUiFrame works as expected.
The ContentBlockUIFrame components are able to use the methods of ContentBlock.

Check my example 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>

Leave a comment