有没有一种方法可以将具有输入的组件转换为原始HTML？

Question

我在Vue组件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属性相对应。