在網(wǎng)頁(yè)中，我們常常需要使用iframe標(biāo)簽來(lái)嵌入另一個(gè)頁(yè)面，以便展示其他網(wǎng)頁(yè)內(nèi)容。當(dāng)使用Vue.js來(lái)開(kāi)發(fā)頁(yè)面時(shí)，我們有時(shí)需要在iframe中獲取Vue數(shù)組內(nèi)的數(shù)據(jù)。本文將介紹如何通過(guò)iframe獲取Vue數(shù)組。

一、在父頁(yè)面定義Vue數(shù)組

new Vue({
el: '#app',
data: {
items: [
{name: 'item1', price: 10},
{name: 'item2', price: 20},
{name: 'item3', price: 30}
]
}
})

上述代碼中，我們定義了一個(gè)Vue實(shí)例，并在data屬性中定義了一個(gè)名為items的數(shù)組。該數(shù)組內(nèi)包含3個(gè)對(duì)象，每個(gè)對(duì)象包含name和price兩個(gè)屬性。

二、在iframe中獲取Vue數(shù)組數(shù)據(jù)

<iframe id="myIframe" src="child.html"></iframe><script>var iframe = document.getElementById('myIframe');
var win = iframe.contentWindow;
var items = win.app.$data.items;
</script>

首先，我們?cè)诟疙?yè)面中嵌入一個(gè)iframe標(biāo)簽，并指定該iframe打開(kāi)的頁(yè)面為child.html。然后在父頁(yè)面的script標(biāo)簽中獲取該iframe元素，并通過(guò)contentWindow屬性獲取iframe內(nèi)頁(yè)面的window對(duì)象。

接著，我們通過(guò)win.app.$data.items獲取到子頁(yè)面Vue實(shí)例內(nèi)的items數(shù)組。其中，app為子頁(yè)面Vue實(shí)例的引用，$data表示Vue實(shí)例中的data屬性。

三、在子頁(yè)面中定義Vue實(shí)例

new Vue({
el: '#app',
data: {
items: [
{name: 'item1', price: 10},
{name: 'item2', price: 20},
{name: 'item3', price: 30}
]
},
mounted: function () {
window.parent.postMessage(this.$data.items, '*');
}
})

在子頁(yè)面中，我們同樣需要定義一個(gè)Vue實(shí)例。這里我們定義了一個(gè)跟父頁(yè)面相同的items數(shù)組，并在mounted鉤子函數(shù)中發(fā)送了postMessage消息到父頁(yè)面。該消息中包含了items數(shù)組，發(fā)送到了父頁(yè)面中。

四、在父頁(yè)面中獲取子頁(yè)面數(shù)據(jù)

window.addEventListener('message', function (event) {
if (event.source != iframe.contentWindow) return;
var items = event.data;
}, false);

最后，在父頁(yè)面的script標(biāo)簽中監(jiān)聽(tīng)message事件，并判斷事件來(lái)源是否為iframe，如果是，則通過(guò)event.data獲取到子頁(yè)面發(fā)送的消息，即items數(shù)組。

通過(guò)上述幾步，我們可以在iframe中獲取到Vue數(shù)組，實(shí)現(xiàn)了頁(yè)面內(nèi)數(shù)據(jù)共享。需要注意的是，我們需要確保在子頁(yè)面的mounted鉤子函數(shù)中，才能獲取到完整的Vue實(shí)例。否則，可能會(huì)出現(xiàn)由于異步數(shù)據(jù)還未加載完成而獲取不到完整的數(shù)據(jù)的情況。