假设有两个文件
general.vue(这是一个vue多入口生成的实例,会被打包为一个单独的general.html)
generalPage.vue(这个文件通过iframe引入general.html)
那么,如何在general.vue里触发generalPage.vue中的方法vueFun?
方法如下:
1.在general.vue中通过parent.vueFun(params)调用函数
general.vue------------------------------------------------------------------------------------------------------
<template>
<div class="main-cotent">
<span @click='checkButtonClick({linktype: item.linktype, type: "a"})'>调用</span>
</div>
</template>
<script>
export default {
name: 'general',
created () {
},
methods: {
checkButtonClick (params) {
parent.vueFun(params)
}
}
}
</script>
1.在generalPage.vue中,在created中将vueFun 注册为全局即可调用
generalPage.vue------------------------------------------------------------------------------------------------
<template>
<div class="main-cotent">
<iframe id="windowiframe" frameborder="no" border="0" src="general.html"></iframe>
</div>
</template>
<script>
export default {
name: 'generalSurvey',
created () {
window.vueFun = function (params) {
alert('hello')
}
}
}
</script>

本文介绍了一种Vue项目中通过iframe进行父子组件通信的方法。在general.vue中通过调用parent.vueFun触发了在generalPage.vue中定义的全局函数vueFun。此方案适用于需要在不同html页面间通信的场景。

2765

被折叠的 条评论
为什么被折叠?



