如何以编程方式为整个组件访问 Vue 组件中样式标记的内容（innerText）？答案

【问题标题】：How to access content (innerText) of style tag in Vue Component programmatically for entire component?如何以编程方式为整个组件访问 Vue 组件中样式标记的内容（innerText）？
【发布时间】：2020-02-03 10:11:40
【问题描述】：

对于我当前的项目，我需要将 html（和样式）传递给 puppeteer 以从中生成 pdf。我正在使用 $ref.export.$el.innerHTML 访问 html，但如何访问该样式？到目前为止，我的解决方法是创建一个包含相同样式属性的 div，以便我也可以将其作为 ref 访问。

保持原始的 css 语法以便能够在战后用它构建 html 很重要。我还需要获取组件的整个样式，而不仅仅是单个元素。

【问题讨论】：

你试过 $ref.export.$el.style 吗？

标签： javascript vue.js

【解决方案1】：

首先您需要访问 ref，然后您只需要直接访问样式或get computed styles。

模板

<!-- vm.$refs.p will be the DOM node -->
<p ref="p">hello</p>

现在您可以通过this.$refs.p.style 访问样式。如果您想要计算样式，则需要如下示例所示的辅助函数。

脚本

methods: {
  getStylesFromRef() {
    // return this.$refs.p.style if you have style attributes
    // following line for computed styles
    return window.getComputedStyle(this.$refs.p)
  }
}

【讨论】：

谢谢，我更新了我的问题，因为我忘了提到我需要所有样式，而不仅仅是单个元素样式
那么您应该在编译期间将样式放入样式块中，并通过该块上的 innerHTML 访问样式。没有简单的解决方案可以从 DOM 中获取所有应用的样式

【解决方案2】：

我通过在我的模板中使用<component> 和is="style" 解决了这个问题，这样在编译https://stackoverflow.com/a/57331310/8773697 时它就不会被删除

【讨论】：