vue中iframe嵌套页面并传值

在Vue中，可以通过给iframe的src属性传递参数的方式来实现iframe嵌套页面传值。

1. 在父组件中，定义一个变量来存储要传递给iframe的参数值。

<template>
  <div>
    <iframe :src="iframeUrl"></iframe>
  </div>
</template>

<script>
export default {
  data() {
    return {
      iframeUrl: ''
    }
  },
  mounted() {
    // 设置iframe的src属性，传递参数
    this.iframeUrl = `/iframe?param=${this.paramValue}`;
  },
  computed: {
    paramValue() {
      // 从父组件中获取参数值
      return this.$store.state.paramValue;
    }
  }
}
</script>

2. 在iframe的嵌套页面中，通过获取url中的参数来获取父组件传递的参数值。

<template>
  <div>{{ param }}</div>
</template>

<script>
export default {
  data() {
    return {
      param: ''
    }
  },
  mounted() {
    // 获取url中的参数值
    const searchParams = new URLSearchParams(window.location.search);
    this.param = searchParams.get('param');
  }
}
</script>

这样就可以实现在Vue中通过iframe嵌套页面并传值的功能。