vue 父元件呼叫子元件的方法,子元件呼叫父元件方法
阿新 • • 發佈:2018-12-11
首先看程式碼:
1、父元件:
<template> <div> <div v-if="!userShow"> 父元件內容區 <el-button @click="lookUserInfo(scope.row)"> 檢視</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"> 返回</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');