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方法中，将数据属性写入服务器呈现的元素，以便可以在客户端中读取该元素，然后将其与组件混合。

现在我有2个问题：

那是可行的方法
如何在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指令访问组件名称

2 个答案: