vue父页面调用子页面方法

1、子页面，文件名MapContainer.vue

<template>
  <div class="box">
	<div style="position: absolute;z-index: 10;cursor:pointer" @click="animates()"></div>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
       
    }
  },
  methods: {
	animates(){
		console.log('被父页面点击了')
	},
	
  },
  
}
</script>

<style>
	
</style>

2、父页面App.vue

<template>
  <div id="app">
     //子页面绑定child事件
	<MapContainer ref="child"></MapContainer>
  </div>
</template>

<script>
import MapContainer from './components/MapContainer.vue'

export default {
  name: 'app',
  components: {
	MapContainer
  },
  methods: {
	  animatesa(){
          //调用子页面方法
		  this.$refs.child.animates();
	  }
  }
}
</script>

<style>
	body {
		background: #050b17;
	}
#app {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  color: #ffffff;
  display: flex;
  width: 4608px;
  height: 1024px;
}

.body {
	margin: 60px 30px;
	display: flex;
}

.side {
	border: 1px solid #fff;
	width: 1200px;
	height: 920px;
}
.middle {
	position: absolute;
	width: 2608px;
	left: 1000px;
	z-index: 1;
	flex: 1;
	border: 1px solid #fff;
}
</style>