父、子框架时，Vue的使用问题

Question

最近在使用Vue做一个网页，使用了layer弹窗，弹窗出来后，需要将弹窗frame中的数据传给父级页面中的Vue实例中

    //实例化Vue
    var app = new Vue({
        el: '#app',
        data() {
            return {
                article:{
                    title:"文章标题",
                    content:"文章内容"
                }
            }
      }
    })

在弹窗页面中使用以下方式有问题

 parent.app.article.title = "新的标题"

请问如何在ifame子页面中设置父页面Vue实例的data值呀？

Answer 1

望采纳。如果你希望从一个 iframe 子页面中修改父页面中 Vue 实例的数据，你需要通过 postMessage 方法来实现。

首先，在父页面中添加一个监听事件，用来监听来自子页面的消息：

window.addEventListener('message', function (event) {
  // 接收到的消息在 event.data 属性中
  // 根据实际情况解析 event.data，并更新 Vue 实例的数据
});

然后，在子页面中，使用 postMessage 方法将数据发送到父页面：

// 要发送的消息
var message = {
  title: "新的标题"
};

// 发送消息到父页面
parent.postMessage(message, '*');

这样，父页面就能通过监听事件来获取子页面发送的消息，并更新 Vue 实例的数据。