Обновить данные в дочернем компоненте, полученные с помощью $slots

Я считаю, что вызов метода дочернего компонента из родительского в большинстве случаев бесполезен, даже если вы хотите достичь высокого уровня возможности повторного использования.

Если ваши варианты использования:

<ComponentA>
  <ComponentB />
</ComponentA>

Где <ComponentB /> можно заменить на <ComponentC /> или <ComponentD />, и он всегда будет внутри <ComponentA />. Тогда то, чего вы хотите достичь, называется COMPOUND COMPONENT паттерном.

Цитата из Переосмысление возможности повторного использования с помощью vue от Алекса Випонда:

В составной группе компонентов есть один родительский компонент, который управляет большей частью или всем этим состоянием, а также есть компоненты-потомки, которые встраиваются в родительский компонент. Внутренне эти потомки изменяют и наблюдают за состоянием родителя, готовые отреагировать на изменения, внесенные другими потомками.

Но самый важный момент:

Кроме того, потомки не могут использоваться вне родительского компонента. Без реактивного состояния родителя потомки ломаются.

Я видел, что многие библиотеки компонентов действительно используют подобные шаблоны. Например, этот компонент меню от Headless UI действительно использует подобные шаблоны. Где родитель управляет почти всем состоянием и предоставляет его своим детям, активно используя слоты с ограниченной областью действия и предоставление и внедрение.

Кроме того, в официальной документации Vue.js также есть похожий шаблон раздела под названием Компоненты без рендеринга, который является аналогичным шаблоном, который многие библиотеки компонентов пользовательского интерфейса используют для обеспечения возможности повторного использования.

Итак, для ваших случаев использования вы можете использовать предоставить и внедрить для достижения аналогичной возможности повторного использования.

В этом примере будет использоваться предоставить и внедрить, но вы также можете использовать слоты с ограниченной областью для достижения аналогичного результата:

// ComponentA.vue
<script setup>
import { provide } from 'vue'

function fireComponentAMethod() {
  alert('fire')
}

provide('componentAMethod', fireComponentAMethod)
</script>

<template>
  <slot></slot>
</template>

И ComponentB:

// ComponentB.vue
<script setup>
import { inject } from 'vue'

const componentAMethod = inject('componentAMethod')
</script>

<template v-slot = "slotProps">
  <button @click = "componentAMethod">Click Me</button>
</template> 

Вот простая игровая площадка vue.js , в которой используются слоты с ограниченной областью и предоставление и внедрение для достижения аналогичных результатов.

Я исследовал это еще немного, и благодаря ответу @cantdocpp приготовил решение с использованием подхода предоставления/инжекта, предлагаемого Vue. Хотя для меня это больше похоже на обходной путь и хак, это самое близкое, что мне нужно.

// ComponentA
<template>
...
<div ref = "componentA">
  <slot></slot>
  <button @click = "fireComponentAMethod" />
</div>
...
</template>
<script>
import { computed } from "vue";

export default {
  ...
  data() {
    return {
      triggered: null,
    };
  },
  provide() {
    return {
      triggered: computed(() => this.triggered),
    };
  },
  methods: {
    fireComponentAMethod() {
      this.triggered = new Date();
    },
  },
}
</script>

// ComponentB
<template>
...
isValueSet: {{ isValueSet }}
...
</template>
<script>
export default {
  ...
  data() {
    return {
      isValueSet: false,
    };
  },
  methods: {
    fireComponentBMethod() {
      console.info("I just fired fireComponentBMethod");
      this.isValueSet = true;
      console.info(this.isValueSet);
    },
  },
  inject: ["triggered"],
  watch: {
    'triggered': function (n, o) {
      this.fireComponentBMethod();
    },
  },
}
</script>

Теперь этот подход изменится triggered при нажатии кнопки и вызовет обновление ComponentB. Я использую new Date(), чтобы значение triggered всегда было уникальным. Это меняет значения в data, что и было основной целью.