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.js 中 axios 跨域访问错误问题及解决方法，非常不错，具有一定的参考借鉴价值 ,需要的朋友可以参考下2018-11-11
这篇文章主要介绍了vue请求数据的三种方式,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-03-03
m3u8是一种常用的视频流媒体格式,通常用于在Web上播放视频,这篇文章主要给大家介绍了关于vue项目实现m3u8流媒体播放的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下2024-09-09
Vuex 作为一个老牌 Vue 状态管理库，大家都很熟悉了，Pinia 是 Vue.js 团队成员专门为 Vue 开发的一个全新的状态管理库，本文就来讲讲它的具体使用吧2023-04-04
TypeError:res.forEach is not a function报错解决办法
这篇文章主要给大家介绍了关于TypeError:res.forEach is not a function报错的解决办法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2023-07-07
今天小编就为大家分享一篇Vue 配合eiement动态路由,权限验证的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
provide/inject 适用于跨级通信，在孙组件中通过依赖注入的方式能获取到父组件中改变的这个值，下面通过实例代码介绍vue3-组合式api-provide/inject的相关知识,需要的朋友可以参考下2022-11-11
这篇文章主要介绍了用VueJS写一个Chrome浏览器插件的实现方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-02-02
这篇文章主要为大家详细介绍了Vue.js组件tree实现省市多级联动的相关资料,具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-12-12
Vue3报错‘defineProps‘ is not defined的解决方法
最近工作中遇到vue3中使用defineProps中报错,飘红,所以这篇文章主要给大家介绍了关于Vue3报错‘defineProps‘ is not defined的解决方法,需要的朋友可以参考下2023-01-01
最新评论