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

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

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

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

二、在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>

首先，我們在父頁面中嵌入一個iframe標簽，并指定該iframe打開的頁面為child.html。然后在父頁面的script標簽中獲取該iframe元素，并通過contentWindow屬性獲取iframe內(nèi)頁面的window對象。

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

三、在子頁面中定義Vue實例

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, '*');
}
})

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

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

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

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

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