VUE3引入html文件并传值方法举例
作者：今天也是改样式
这篇文章主要给大家介绍了关于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文件传值内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！