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

Posted 2023-02-23

【中文标题】有没有办法从带有输入的组件转换为原始 html？

【英文标题】：Is there a way to convert from a component with inputs to raw html?

【发布时间】：2019-09-16 09:04:03

【问题描述】：

我在 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()

【问题讨论】：

也许使用类似document.getElementById('component').innerHTML

在这种情况下我实际上并没有组件的实例，只有模板的定义和要传入的参数

【参考方案1】：

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

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

this.$refs

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

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

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

【讨论】：

使用连字符号命名ref 将返回错误。要以正确的方式访问 ref，您必须编写 this.$refs['component-z']

@JimmerFlash 不确定您的意思。尝试解决方案，让我知道会发生什么。