vue 父元件調用子元件的方法，子元件調用父元件方法

首先看代碼：

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這個名字可以随意取（注意ref屬性的命名不能用駝峰，同時擷取的時候也是）

      （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');