脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → VUE3引入html文件传值

VUE3引入html文件并传值方法举例

 更新时间：2023年07月03日 15:52:04   作者：今天也是改样式  
这篇文章主要给大家介绍了关于VUE3引入html文件并传值的相关资料,这是最近在项目中遇到了的一个需求,文中通过实例代码介绍的非常详细,需要的朋友可以参考下

1、把html页面放到指定目录中(我是放在public中的)

 2，使用iframe标签把html页面引入到页面中

<template>
  <div class="if_box">
    <iframe src="../../public/first.html" width="100%" height="100%" ref="fIframe">
    </iframe>
  </div>
</template>

 3，通过ref获取iframe元素并且通过contentWindow自定义函数给html页面传值

<script lang="ts">
import { ref, nextTick, onMounted } from 'vue'
export default {
  components: {},
  setup() {
    const fIframe = ref<any>();
    let total = [1, 2, 3, 4];
    const sendData = (data) => {
      fIframe.value.onload = function () {
        fIframe.value.contentWindow.postMessage(total, 'http://127.0.0.1:5173')
           //第一个参数是你要传的数据，第二个这是你是项目地址
      }
    }
    onMounted(() => {
      sendData(total)
    })
    return {
      fIframe,
      sendData
    }
  },
}
</script>

注意：我是进入页面传值了，所以一定要把方法放在onMounted里面，因为dom是异步更新的，如果直接放在外面是获取不到的，同时还要用onload监听组件是否加载完毕。

4、在html文件中监听message事件获取传值

<script>
    window.addEventListener('message', (e) => {
        console.log("拿到数据", e.data);
    });
</script>

最后在获取的效果

除此之外传值还有一个方法

第二个方法：

绑定组件这些操作都是一样的，第二个方法不同的地方在他是通过html页面中定义的函数传值的，直接看操作

1、先在html页面中定义一个函数

<script>
    function receiveData(data) {
        console.log('获取到数据', data)
    }
</script>

 2、然后在vue页面中通过contentWindow调用这个函数，同样的我们也要监听html页面是否加载完，否则会报错

<script lang="ts">
import { ref, nextTick, onMounted } from 'vue'
export default {
  components: {},
  setup() {
    const fIframe = ref<any>();
    let total = [1, 2, 3, 4];
    const sendData = (data) => {
      fIframe.value.onload = function () {
        fIframe.value.contentWindow.receiveData(data);
      }
    }
    onMounted(() => {
      sendData(total)
    })
    return {
      fIframe,
      sendData
    }
  },
}
</script>

最后上完整代码

VUE

<template>
  <div class="if_box">
    <iframe src="/first.html" width="100%" height="100%" ref="fIframe"></iframe>
  </div>
</template>
<script lang="ts">
import { ref, nextTick, onMounted } from 'vue'
export default {
  components: {},
  setup() {
    const fIframe = ref<any>();
    let total = [1, 2, 3, 4];
    const sendData = (data) => {
      fIframe.value.onload = function () {
        //方法一
        // fIframe.value.contentWindow.postMessage(total, 'http://127.0.0.1:5173')
        //方法二
        fIframe.value.contentWindow.receiveData(data);
      }
    }
    onMounted(() => {
      sendData(total)
    })
    return {
      fIframe,
      sendData
    }
  },
}
</script>

HTML

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <div>
        iframe页面插入
    </div>
</body>
<script>
    // 方法一
    window.onload = () => {
        // 子页面接收消息
        window.addEventListener('message', function (e) {
            console.log("拿到数据", e.data);
            if (e.data) {
                this.getdate = e.data
            }
        }, false)
    }
    // 方法二
    function receiveData(data) {
        console.log('获取到数据', data)
    }
</script>
</html>

总结

到此这篇关于VUE3引入html文件并传值的文章就介绍到这了,更多相关VUE3引入html文件传值内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • vue使用拖拽方式创建结构树

    vue使用拖拽方式创建结构树

    这篇文章主要为大家详细介绍了vue使用拖拽方式创建结构树，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2021-10-10
  • vue cli实现项目登陆页面流程详解

    vue cli实现项目登陆页面流程详解

    CLI是一个全局安装的npm包，提供了终端里的vue命令。它可以通过vue create快速搭建一个新项目，或者直接通过vue serve构建新想法的原型。你也可以通过vue ui通过一套图形化界面管理你的所有项目
    2022-10-10
  • vue 获取url参数、get参数返回数组的操作

    vue 获取url参数、get参数返回数组的操作

    这篇文章主要介绍了vue 获取url参数、get参数返回数组的操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2020-11-11
  • vue2.0 实现导航守卫（路由守卫）

    vue2.0 实现导航守卫（路由守卫）

    vue-route 提供的 beforeRouteUpdate 可以方便地实现导航守卫（navigation-guards）。这篇文章主要介绍了vue2.0 实现导航守卫（路由守卫）的相关知识,需要的朋友可以参考下
    2018-05-05
  • 详解基于Vue2.0实现的移动端弹窗(Alert, Confirm, Toast)组件

    详解基于Vue2.0实现的移动端弹窗(Alert, Confirm, Toast)组件

    这篇文章主要介绍了详解基于Vue2.0实现的移动端弹窗(Alert, Confirm, Toast)组件，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-08-08
  • 在Vue3中使用provide和inject进行依赖注入的代码详解

    在Vue3中使用provide和inject进行依赖注入的代码详解

    在现代前端开发中,Vue.js已经成为了非常流行的框架之一,它提供了极大的灵活性和可维护性,今天我们要探讨的是Vue 3中的provide和inject功能,这是一种用于在组件树中进行依赖注入的方法,需要的朋友可以参考下
    2024-06-06
  • 分分钟玩转Vue.js组件

    分分钟玩转Vue.js组件

    这篇文章教大家如何分分钟玩转Vue.js组件,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2016-10-10
  • vue 中的keep-alive实例代码

    vue 中的keep-alive实例代码

    这篇文章主要介绍了vue中的keep-alive实例代码，vue实现组件信息缓存的方法，在文中也给大家提到,需要的朋友可以参考下
    2018-07-07
  • 一文秒懂vue-property-decorator

    一文秒懂vue-property-decorator

    这篇文章主要介绍了vue-property-decorator的简单知识,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
    2022-08-08
  • 压缩Vue.js打包后的体积方法总结(Vue.js打包后体积过大问题)

    压缩Vue.js打包后的体积方法总结(Vue.js打包后体积过大问题)

    大家都知道，Vuejs的 CLI工具 是基于 webpack 来实现的，所以在项目打包后，会生成的文件会很大。 主要原因是 webpack 将我们所有文件都打包成一个js文件，即使再小的项目，打包之后文件都会变得很大。 下面讲讲最近我遇到的相同问题。
    2020-02-02

最新评论