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文件传值内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了vant 解决tab切换插件标题样式自定义的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-11-11
这篇文章主要介绍了vue cli构建的项目中请求代理与项目打包问题,需要的朋友可以参考下2018-02-02
这篇文章主要给大家介绍了关于vue中组件的3种使用方式，文中通过示例代码介绍的非常详细，对大家学习或者使用vue具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧2019-03-03
今天小编就为大家分享一篇vue实现将数据存入vuex中以及从vuex中取出数据，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-11-11
本篇文章主要介绍了如何使用Vue2做服务端渲染 ，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-03-03
这篇文章主要介绍了vue 微信分享回调iOS和安卓回调出现错误的解决，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-09-09
这篇文章主要介绍了vue中.$mount('#app')手动挂载操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-09-09
uniapp小程序上传文件webapi后端项目asp.net完整代码
在uniapp中,实现文件上传功能也变得非常简单,下面这篇文章主要给大家介绍了关于uniapp小程序上传文件webapi后端项目asp.net的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下2024-07-07
uniapp作为一种基于Vue.js的前端框架,实现了一套代码多端运行的理念,成为了众多开发者的首选,下面这篇文章主要给大家介绍了关于uniapp实现红包动画效果的相关资料,需要的朋友可以参考下2024-01-01
这篇文章主要介绍了element中table高度自适应的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-10-10
最新评论