首先看程式碼：

1、父元件：

<template>
	<div>
		<div v-if="!userShow">
			父元件內容區
			<el-button @click="lookUserInfo(scope.row)">&nbsp;檢視</el-button> 
		</div>
		<!-- 子元件 -->
		<user-manager  v-if="userShow"  @close="showUserInfo" ref="child"> </user-manager>	
	</div>
</template>
<script>
	//匯入使用者頁面
	import userManager from '../userManager.vue';
	export default {
	 	name:'taskManager',
	 	components:{userManager},
	 	data() {
	 		return {			
				userShow:false,				
			}
		},
		methods: {
			//顯示子元件,隱藏父元件
			lookUserInfo(row) {
				this.userShow = true;
				this.$refs.child.chlidMethods
			},
			//此方法，子元件會呼叫，呼叫返回父頁面：隱藏子元件，顯示父元件
			showUserInfo() {
				this.userShow = false;
			},
		}
	}	
</script>
 

2、子元件：

<template>
	<div>
		<!-- 返回父頁面按鈕 -->
		<div>
            <el-button @click="goToParent"> &nbsp;&nbsp;返回</el-button>
        </div>
		<div class="white-bg margin auto">
			<el-table>
				資料表格展示區	
			</el-table>
		</div>
	</div>
</template>
<script>
	export default {
	 	name:'userManager',
	 	data() {
	 		return {	
			}
		},	
		methods: {
			goToParent() {
				//調父頁面方法
			    this.$emit('close');
			}
			chlidMethods() {
				console.log("父元件調子元件方法了")
			}
		}
	}	
</script>
 

重點說明：

       1:、在父元件中

       父元件呼叫子元件步驟：
      （1）、匯入子元件：import userManager from '../userManager.vue';
      （2）、引入元件：  components:{userManager},
      （3）、在要使用的地方寫上子元件標籤：<user-manager></user-manager>  注意不是駝峰命名法，用-連線
      （4）、自定義ref屬性名： ref="child" child這個名字可以隨意取

      （5）、在子元件中新增chlidMethods方法
      （6）、呼叫：this.$refs.child.chlidMethods    chlidMethods這個是子元件中的方法

        2、在子元件中：

        子元件呼叫父元件步驟：
       （1）、在父元件中新增@close屬性：<user-manager @close="showUserInfo"> </user-manager>  close這個名字可以任意取
       （2）、在父元件中新增showUserInfo方法  名字任意取。名字與子元件無任何關係，只有close子元件會用到    
       （3）、子元件調父元件方法：this.$emit('close');