ibu bapa.html

<p id="app">
    <input type="text" v-model="item.name" />
    <input type="checkbox" v-model="item.check" />
    <input type="date" v-model="item.date" />
    <iframe ref="iframe" src="child.html" @load="load"></iframe>
</p>

<script src="http://cdn.bootcss.com/vue/2.1.8/vue.min.js"></script>

<script>
    window.app = new Vue({
        el: '#app',
        data() {
            return {
                item: {
                    name: null,
                    check: false,
                    date: null,
                },
            }
        },
        methods: {
            load: function (item) {
                const app = this.$refs.iframe.contentWindow.app;

                if (app && app.setContent) {
                    app.setContent(this.item)
                }
                else {
                    window._item = this.item
                }
            }
        }
    })
</script>

kanak-kanak.html

<p id="app">
    {{ item }}
</p>

<script src="http://cdn.bootcss.com/vue/2.1.8/vue.min.js"></script>

<script>
    window.app = new Vue({
        el: '#app',
        data() {
            return {
                item: null,
            }
        },
        created: function () {
            this.setContent(window.parent.window._item);
        },
        methods: {
            setContent: function (item) {
                this.item = item;
            }
        }
    })
</script>

Atau lulus kedai vuex untuk menggunakan kedai yang sama untuk contoh vue dua halaman

Jika anda menggunakan iframe, anda hanya boleh menggunakan websocket untuk memberitahu kemas kini Data dua hala vue dan ag hanya boleh dikemas kini dalam masa nyata pada halaman yang sama

iframe adalah merentas halaman Ia amat tidak selamat dan mustahil untuk orang lain menggunakan ng atau vue untuk mengendalikan halaman anda.

Anda boleh mencuba postMessage.