vue.js - 从Vue指令访问组件名称

Question

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

我在服务器(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
  }
});