代码之家 › 专栏 › 技术社区 › Lukas

从Vue指令访问组件名称

hydration ssr serverside-rendering vue.js

1

Lukas · 技术社区 · 6 年前

我想创建一个自定义 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

附言:如果你想知道为什么我只想给我的网站的一部分补水:那就是广告。它们会破坏破坏Vue的DOM。

2 回复 | 直到 6 年前

1

Lukas 6 年前

我能想出来:

import Vue from "vue";

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

2

0

bernie 5 年前

使用之前发布的解决方案,我无法获取单个文件组件的名称,因此我查看了总是能够找到名称的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