vue组件与html文件相互传参
<iframe :src="src" ref="iframe" style="width:100%;height:100%" @click="vueSendMsg" v-trigger></ iframe>
<button @click="htmlFunClick">触发html方法</button>
// 自定义方法传参准备
directives: {
trigger: {
inserted (el, pinging) {
el.click()
}
}
}，
methods() {
// 触发方法 传参给html文件
vueSendMsg() {
setTimeout(() =>{
const iframeWindow = this.$refs.iframe.contentWindow
iframeWindow.postMessage({
cmd: 'myVue',
params: {
id: this.$route.query.id
}
}, '*')
}, 1000)，
htmlFunClick（）{
this.$refs.iframe.contentWindow.clickfun() // 触发html定义的clickfun方法
window['setThis'] = (message, data) => { // 接受html传过来的参数
console.log(message, data) // console -----> '触发成功'， '1234'
}
}
},
<script>
// 准备接受vue 传给的参数
window.addEventListener("message", getVueData)
function getVueData(event) {
console.log(event.data) // vue 传给的参数
}
function clickfun(event) {
console.log("html方法被触发啦！")
window.parent['setThis']('触发成功'， '1234') // 传参给vue文件
}
</script>
