一、查询参数 (Query Params): 通过url传参

<iframe id="iframe" :src="iframeUrl" frameborder="0" width="100%" height="100%"></iframe>

const type= 'this is parent'
const iframeUrl = ref('https://test.com?type='+type)

二、自定义事件:核心的两个方法是 传值：postMessage() 和 接收值：addEventListener()。

父页面引用子页面iframe

 <iframe id="iframe" @load="passDataToIframe" :src="iframeUrl" frameborder="0" width="100%" height="100%"></iframe>

   //向子页面iframe传参
    const passDataToIframe = (event:any) => {
        nextTick(()=>{
            const iframeWindow = event.target.contentWindow;
            iframeWindow.postMessage({ message: 'this is from parent'}, '*');
        })
    };

    //接收来自子页面iframe的参数
    const getMsg = (event:any)=>{
        console.log(event)
    }
    onMounted(()=>{
    	//addEventListener(事件名称，执行函数，触发类型) 用于向指定元素添加监听事件，配合removeEventListener() 方法来移除事件。
        window.addEventListener('message',getMsg);
    })
    onUnmounted(()=>{
        window.removeEventListener('message',getMsg);
    })

子页面iframe向父页面传参，子页面iframe接受父页面的参数

    //子页面iframe发送参数给父页面
    window.parent.postMessage("子页面的参数", "*");
    //子页面iframe接受父页面的参数
    const getMsg = (event:any)=>{
        console.log(event)
    }
    onMounted(()=>{
        window.addEventListener('message',getMsg);
    })
    onUnmounted(()=>{
        window.removeEventListener('message',getMsg);
    })