vue使用 iframe，iframe的高度随内容变化怎么做

在Vue中使用iframe并使其高度随内容变化，可以通过以下步骤实现：

1. 首先，在Vue组件中定义一个变量来保存iframe的高度，例如`iframeHeight`。

2. 在父组件中加载iframe，并添加一个监听器来处理iframe的加载完成事件。在加载完成后，获取iframe的内容高度。

3. 在父组件中使用`postMessage()`方法将iframe的内容高度传递给子组件。

4. 在子组件中添加一个监听器来接收从父组件传递过来的iframe高度。

5. 在子组件中使用`watch`属性或者计算属性来监听iframe高度的变化，并将该高度应用到iframe的样式上。

下面是一个示例代码：

<template>
  <div>
    <iframe ref="myIframe" src="your-iframe-src" @load="handleIframeLoad"></iframe>
  </div>
</template>

<script>
export default {
  data() {
    return {
      iframeHeight: 0
    };
  },
  methods: {
    handleIframeLoad() {
      const iframe = this.$refs.myIframe;
      const iframeDocument = iframe.contentDocument || iframe.contentWindow.document;
      const iframeContentHeight = iframeDocument.body.scrollHeight;

      window.addEventListener("message", event => {
        if (event.data && event.data.type === "iframeHeight") {
          this.iframeHeight = event.data.height;
        }
      });

      iframe.contentWindow.postMessage({ type: "getIframeHeight" }, "*");
    }
  },
  watch: {
    iframeHeight(newHeight) {
      this.$refs.myIframe.style.height = `${newHeight}px`;
    }
  }
};
</script>

在子组件中，我们监听`iframeHeight`变量的变化，并将新的高度应用到iframe的样式上。

在父组件中，我们使用`postMessage()`方法向子组件传递iframe的内容高度，并在子组件中接收该高度，并更新`iframeHeight`变量。

请注意，在加载完成后，我们使用`postMessage()`方法将消息发送到iframe中，以请求获取iframe的内容高度。为了避免安全问题，我们使用`"*"`来指定接收消息的窗口。你可以根据实际情况调整这些代码来适应你的项目需求。

希望对你有所帮助！如果还有其他问题，请随时提问。