无法调用子窗口函数

Posted 2021-04-04

我有这个Vue页面，它使用以下行打开一个子窗口;

this.presentation = window.open(
    this.$router.resolve({name:'presentation'}).href,
    'child window',
    'width=auto,height=auto'
);

这就像一个魅力，但现在我需要称它为方法。我试图像这样访问它们。 家长：

this.presentation.setPage(0);

儿童：

export default {
  name: 'Presentation',
  data() {
    return {
      page: null
    }
  },
  methods: {
    setPage(_page) {
      this.page = _page;
    }
  }

这会引发跟随错误。

TypeError: "this.presentation.setPage is not a function"

为什么我不能调用子方法？我怎样才能解决这个问题？

答案

首先，来自window.open() documentation：

窗口

...名称不应包含空格。 ...

返回值：

表示新创建的窗口的Window对象。

你的this.presentation包含Window对象，而不是Vue对象。当然，它没有setPage()方法。

也许，类似的东西可以工作（在你的孩子组件中）：

{
  mounted() {
    window.setPage = (page) => this.setPage(page);
  }
}