Доступ к имени компонента из директивы Vue

Question

Я хочу создать кастом Vue директива, которая позволяет мне выбирать компоненты на моей странице, которые я хочу гидрировать. Другими словами, это то, что я хочу архивировать

1. Я отдаю мой Vue приложение на сервере (ssr)

2. Я прилагаю директиву к некоторым компонентам, например:

   <template>
       <div v-hydrate @click="do-something"> I will be hydrated</div>
   </template>
   

3. Я отправляю свой код клиенту и только те компоненты, которые имеют v-hydrate собственность будет гидратирована (как root элементы) на клиенте.

Я хочу добиться этого примерно так:

Я создам директивы, которые помечают и запоминают компоненты:

import Vue from "vue";

Vue.directive("hydrate", {
  inserted: function(el, binding, vnode) {
    el.setAttribute("data-hydration-component", vnode.component.name);
  }
});

Моя идея заключается в том, что в моем inserted Метод записывает атрибут данных в представленный сервером элемент, который я могу прочитать на клиенте, а затем гидрировать мой компонент.

Теперь у меня есть 2 вопроса:

1. Это выполнимый подход
2. Как получить имя компонента в el.setAttribute? vnode.component.name это просто фиктивный код и не существует таким образом.

PS: Если вы хотите знать, почему я хочу использовать только часть моего сайта: это реклама. Они связываются с DOM, который ломает Vue.

Answer 1

Я мог бы понять это:

import Vue from "vue";

Vue.directive("hydrate", {
  inserted: function(el, binding, vnode) {
    console.log(vnode.context.$options.name); // the component's name
  }
});

Answer 2

Я не мог получить имя моих отдельных файловых компонентов, используя ранее опубликованное решение, поэтому я взглянул на исходный код vue devtools, которому всегда удается найти имя. Вот как они это делают:

export function getComponentName (options) {
  const name = options.name || options._componentTag
  if (name) {
    return name
  }
  const file = options.__file // injected by vue-loader
  if (file) {
    return classify(basename(file, '.vue'))
  }
}

где options === $vm.$options