vue.js中使用iframe后，子页面调用不了父页面的方法和值

1、场景
父页面：

<div v-if='bloonArr[2].show' style="width:'80%';margin:0 5% 0 25%;">
     <iframe   src="test/son.html"  ></iframe>       
</div>

<script>
	var vmFather = new Vue({
		data:{
			fatherData:'拿取了父页面的数据'
		},
		methods:{
			fatherMethods(){
				console.log('使用了父页面的方法')
			}
		},
	})
</script>

子页面：

	<div>window.parent.fatherData</div>
	<script>
		var vmSon = new Vue({
			data:'',
			methods:'',
			mounted(){
				window.parent.fatherMethods()
			}
		})
	</script>

2、分析
使用vue.js，iframe子页面直接使用window.parent.‘方法名’和window.parent.’数据名’是拿不到父页面中的数据及方法的，需要加上Vue函数的名字。因为这些方法和函数是在父页面的Vue函数中，所以正确写法如下：

	<div>window.parent.vmFather.fatherData</div>
	<script>
		var vmSon = new Vue({
			data:'',
			methods:'',
			mounted(){
				window.parent.vmFather.fatherMethods()
			}
		})
	</script>