VUE3引入html文件并傳值方法舉例
1、把html頁面放到指定目錄中(我是放在public中的)
2，使用iframe標(biāo)簽把html頁面引入到頁面中
<template>
<div class="if_box">
<iframe src="../../public/first.html" width="100%" height="100%" ref="fIframe">
</iframe>
</div>
</template>3，通過ref獲取iframe元素并且通過contentWindow自定義函數(shù)給html頁面?zhèn)髦?/strong>
<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')
//第一個(gè)參數(shù)是你要傳的數(shù)據(jù)，第二個(gè)這是你是項(xiàng)目地址
}
}
onMounted(() => {
sendData(total)
})
return {
fIframe,
sendData
}
},
}
</script>注意：我是進(jìn)入頁面?zhèn)髦盗耍砸欢ㄒ逊椒ǚ旁趏nMounted里面，因?yàn)閐om是異步更新的，如果直接放在外面是獲取不到的，同時(shí)還要用onload監(jiān)聽組件是否加載完畢。
4、在html文件中監(jiān)聽message事件獲取傳值
<script>
window.addEventListener('message', (e) => {
console.log("拿到數(shù)據(jù)", e.data);
});
</script>最后在獲取的效果
除此之外傳值還有一個(gè)方法
第二個(gè)方法：
綁定組件這些操作都是一樣的，第二個(gè)方法不同的地方在他是通過html頁面中定義的函數(shù)傳值的，直接看操作
1、先在html頁面中定義一個(gè)函數(shù)
<script>
function receiveData(data) {
console.log('獲取到數(shù)據(jù)', data)
}
</script>2、然后在vue頁面中通過contentWindow調(diào)用這個(gè)函數(shù)，同樣的我們也要監(jiān)聽html頁面是否加載完，否則會(huì)報(bào)錯(cuò)
<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("拿到數(shù)據(jù)", e.data);
if (e.data) {
this.getdate = e.data
}
}, false)
}
// 方法二
function receiveData(data) {
console.log('獲取到數(shù)據(jù)', data)
}
</script>
</html>總結(jié)
到此這篇關(guān)于VUE3引入html文件并傳值的文章就介紹到這了,更多相關(guān)VUE3引入html文件傳值內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue使用拖拽方式創(chuàng)建結(jié)構(gòu)樹
這篇文章主要為大家詳細(xì)介紹了vue使用拖拽方式創(chuàng)建結(jié)構(gòu)樹，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-10-10
vue cli實(shí)現(xiàn)項(xiàng)目登陸頁面流程詳解
CLI是一個(gè)全局安裝的npm包，提供了終端里的vue命令。它可以通過vue create快速搭建一個(gè)新項(xiàng)目，或者直接通過vue serve構(gòu)建新想法的原型。你也可以通過vue ui通過一套圖形化界面管理你的所有項(xiàng)目2022-10-10
vue 獲取url參數(shù)、get參數(shù)返回?cái)?shù)組的操作
這篇文章主要介紹了vue 獲取url參數(shù)、get參數(shù)返回?cái)?shù)組的操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-11-11
vue2.0 實(shí)現(xiàn)導(dǎo)航守衛(wèi)（路由守衛(wèi)）
vue-route 提供的 beforeRouteUpdate 可以方便地實(shí)現(xiàn)導(dǎo)航守衛(wèi)（navigation-guards）。這篇文章主要介紹了vue2.0 實(shí)現(xiàn)導(dǎo)航守衛(wèi)（路由守衛(wèi)）的相關(guān)知識(shí),需要的朋友可以參考下2018-05-05
詳解基于Vue2.0實(shí)現(xiàn)的移動(dòng)端彈窗(Alert, Confirm, Toast)組件
這篇文章主要介紹了詳解基于Vue2.0實(shí)現(xiàn)的移動(dòng)端彈窗(Alert, Confirm, Toast)組件，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-08-08
在Vue3中使用provide和inject進(jìn)行依賴注入的代碼詳解
在現(xiàn)代前端開發(fā)中,Vue.js已經(jīng)成為了非常流行的框架之一,它提供了極大的靈活性和可維護(hù)性,今天我們要探討的是Vue?3中的provide和inject功能,這是一種用于在組件樹中進(jìn)行依賴注入的方法,需要的朋友可以參考下2024-06-06
這篇文章教大家如何分分鐘玩轉(zhuǎn)Vue.js組件,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-10-10
這篇文章主要介紹了vue中的keep-alive實(shí)例代碼，vue實(shí)現(xiàn)組件信息緩存的方法，在文中也給大家提到,需要的朋友可以參考下2018-07-07
這篇文章主要介紹了vue-property-decorator的簡(jiǎn)單知識(shí),本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-08-08
壓縮Vue.js打包后的體積方法總結(jié)(Vue.js打包后體積過大問題)
大家都知道，Vuejs的 CLI工具 是基于 webpack 來實(shí)現(xiàn)的，所以在項(xiàng)目打包后，會(huì)生成的文件會(huì)很大。 主要原因是 webpack 將我們所有文件都打包成一個(gè)js文件，即使再小的項(xiàng)目，打包之后文件都會(huì)變得很大。 下面講講最近我遇到的相同問題。2020-02-02