从 Vue 指令访问组件名称

Question

我想创建一个自定义 Vue 指令，让我可以 select 在我的页面上添加我想要混合的组件。换句话说，这就是我要存档的内容

我在服务器上呈现我的 Vue 应用程序 (ssr)

我将指令附加到一些组件，如下所示：

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

我将我的代码发送给客户端，只有那些具有 v-hydrate 属性的组件才会在客户端上被水合（作为 root 元素）。

我想大致这样实现：

我将创建一个标记和记住组件的指令：

import Vue from "vue";

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

我的想法是，在我的 inserted 方法中，将一个数据属性写入服务器呈现的元素，我可以在客户端中读出该元素，然后用它来滋润我的组件。

现在我有两个问题：

这样可行吗
如何获取el.setAttribute中的组件名称？ vnode.component.name 只是伪代码，不存在这种方式。

PS：如果你想知道为什么我只想给网站的某些部分加水：这是广告。他们弄乱了破坏 Vue 的 DOM。

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

从 Vue 指令访问组件名称

Access the component name from a Vue directive

vue.js

server-side-rendering

hydration