Vue页面嵌入其他页面

Posted 2023-04-05 程序研

1.核心部分

   <iframe src="../../A4的测试.html"  scrolling="no"  style="width: 100%;height: 500px;" frameborder="0" ></iframe>

src可以使用网页连接模式，如果不成功则需要考虑跨域问题。

2.整体代码

<template>
    <div>
    <iframe src="../../A4的测试.html"  scrolling="no"  style="width: 100%;height: 500px;" frameborder="0" ></iframe>
    </div>
</template>

<script>
    export default 
        
    
</script>

<style lang="scss" scoped>

</style>

获取文章流量推荐曝光度随便胡说八道两句

vue3.0带来了什么

1.性能的提升

• 打包大小减少41%
• 初次渲染快55%,更新渲染块133%
• 内存减少54%
• ........

2.源码的升级

• 使用Proxy代替defineProperty实现响应式
• 重写虚拟DOM的实现和Tree-Sharking
• ......

3.拥抱TypeScript

• vue3.0更好的支持TypeScript

4.新的特性

Composition API(组合api)

。 setup配置

。ref与reactive

。watch与watchEffect

。 provide和inject

。 .......

新的内置组件

。 Fragment

。Teleport

。Suspense

其他改变

。新的生命周期钩子

。data选项应始终被声明为一个函数

。移除keyCode支持作为v-on的修饰符

vue 弹窗如何嵌入其它页面

直接上代码。

代码使用的是Element-ui。

A页面（父页面）

将B页面当作组件引入。

import taskLogList from '../dialogPage/index.vue'
export default {  
  components:{
      dialogPage
    },
...
}

将组件引入放到HTML代码中

 <dialogPage 
    v-if="formPageVisible" 
    ref="formPageRef" 
    :queryId="logDialog.queryId">
</dialogPage >

代码说明

queryId：自定义的传值参数。 目的是将值从父页面传递到子页面去。

formPageVisible：显示参数。

在调用当前弹窗的方法里面进行如下设置

methods:{
    ...

    /**
    * 弹窗方法
    */
    showLog(obj){

        //显示
        this.formPageVisible = true;

        //赋值
        this.queryId= obj.queryId;

        //调用子页面方法
        this.$nextTick(()=>{
            
          this.$refs.formPageRef.getlist();
        })
      }
}

基本上A页面已经可以退休了。

下面B页面开始上场。

B页面（子页面）

B页面主要的工作是两个。

1、获取A页面的传值

2、方法的实现。

1、获取A页面的传值

传值的话，在Vue中。一般在props中进行设置。

 export default {
    props: {
      queryId:{
        type: String,
        default: '',
      },
    },
 ...

在这个里面，queryId是前面传递过来的参数。

2、方法的实现。

省略....

对了，记得把B页面设置为dialog。否则弹窗的效果可能不能实现哦。

留个小问题，如何把B页面的操作结果返回给A页面呢？