1. 程式人生 > >vue 父元件呼叫子元件的方法,子元件呼叫父元件方法

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這個名字可以隨意取

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