首先需要明确的一点,标题所说的子页面调用父页面的方法或者函数,是需要父子页面配合的。如果子页面不是你自己开发的, 或者父页面不是自己开发的,那就没办法调用了。而且, 因为业务的特殊需要,我们用到了iframe,如果只是Vue两个父子组件的传值或者调用,其实是非常简单的,百度一下,就能出现很多。这里就不一一赘述了。

  在明确了以上的点以后,开始这一次的分享。首先先说一下, 没有在Vue框架中, 就是单纯的HTML页面,子页面调用父页面的函数,其实非常的简单。在子页面中,有一个windows.parent的方法。我们打印来看一下这个方法中有什么东西;

 这还是一个windos的对象,而且里面居然有了我在父页面中定义的方法,大家可以看下,父页面的代码。 

父页面的代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p>这里是父元素</p>
    <iframe src="./child.html" frameborder="0"></iframe>
</body>
<script>
    function myconsole(a) {
        console.log(a);
        console.log("这里是父元素的方法")
    }
</script>
</html>

其实这样的话就已经很简单了,子页面要是想要调用父页面的方法,只需要在windos.parent中调用父组件定义好的方法就行了。下面是子页面的代码。

子页面的代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>这里是子元素</h1>
    <button id="btn">按钮</button>
</body>
<script>
    var btn = document.getElementById("btn")
    btn.onclick = function () {
        console.log('子元素点击了')
        window.parent.myconsole("哈哈哈,这是传参");
        console.log(window);
        console.log(window.parent);
    }
</script>
</html>

同时,我们可以看到,这个是可以传参的。如果需要传参的话,直接在这里传参就好了。

  上面说完了普通的传值,其实Vue中的就很简单了。但是Vue中需要注意的一个点就是,在父页面中的methods定义了方法,需要在mounted的时候,把这个方法暴露给window的全局对象;

父页面代码Vue:

export default {
  name: "parent",
  data() {
    return {};
  },
  props: {},
  mounted() {
    window.myconsole = this.myconsole;// 这里需要暴露给全局,这样的话,子页面才能调用相对应的方法
  },
  components: {},
  computed: {},
  methods: {
    myconsole() {
      console.log("这里是调用父元素中的方法");
    },
  }
};

子页面想要调用其实也是很简单的,请看下面的代码:

子页面的Vue代码:

<template>
    <div id="child">
        <button @click="clo">按钮</button>
    </div>
</template>
<script>
    export default {
        name: "child",
        data() {
            return {};
        },
        props: {},
        mounted() {
            window.myconsole = this.myconsole;
        },
        components: {},
        computed: {},
        methods: {
            clo() {
                console.log('点击了子页面的按钮')
                window.parent.myconsole();
            },
        }
    };
</script>

  这样的话,就实现了,上面所说的,子页面调用父页面的方法。同时也是实现了,父子页面的传值。不过需要说明的一点就是,这个没办法直接调试,因为必须打包完成之后才能在iframe中引入。所以大家在做这一方面的时候,多加打印日志。等到调试完成之后,在删除打印的东西。

Logo

前往低代码交流专区

更多推荐