有没有办法从带有输入的组件转换为原始 html？

Question

我在 Vue component-z 中有一个组件。

我需要传入某些参数，所以当我在我的 Vue 的 html 中使用它时，我会这样做：

<component-z id="component" data1="data" data2="moreData"></component-z>

我需要从中取出 html 并将其作为消息传递给父框架（来自 iFrame）。有没有办法做类似的事情：

<component-z id="component" data1="data" data2="moreData"></component-z>.toHtml()

Answer 1

首先，在该行添加ref属性，如ref='component-z'

如果你在 Vue 文件的 <script> 部分，你可以像这样访问 Vue 实例及其引用：

this.$refs

要访问该组件的外部 HTML（或渲染/原始 HTML），请使用

this.$refs["component-z"].$el.outerHTML

注意该 JavaScript 的“component-z”部分，它对应于您设置的 ref 属性。