vue实现父组件获取子组件的方法或属性值详解

//这里是子组件
<popup  ref="popup"></popup>
//绑定点击事件，并且携带参数
<div class="item-box" @click="showPop('teacher')">
//定义点击事件
showPop(event) {
//获取子组件的属性/方法，这里是获取popup子组件的show方法，并且携带参数
    this.$refs.popup.show(event);
},

//控制弹窗的显示隐藏
<div v-show="showPopup">
     <!-- 关闭按钮，点击直接将showPopup定义为false-->
      <div class="closePopup" @click="showPopup = false"></div>
      <!-- 老师数量 -->
      //通过判断type值控制显示哪个弹窗内容
      <teacher v-if="type =='teacher'"></teacher>
      <student v-else-if="type =='student'"></student>
      <turnover v-else></turnover>
</div>

//在data中定义默认值
data(){
     return {
          showPopup: false,
          type: ''
      }
  },
//最后在methods中定义show方法，控制弹窗的显示
methods:{
   show(type){
        this.type = type
        this.showPopup = true;
    }
}

<template>
    <div class="DbSource-box">
        <el-button type="primary" icon="" class="addBtn" @click="addDbSource()">新增</el-button>
        <db-source-add ref="addAlert" v-on:init="init"></db-source-add>
    </div>
</template>

<script>
    import DbSourceAdd from "../components/DbSourceManager/DbSourceAdd";
    export default {
        name: "DbSourceManager",
        components: {DbSourceAdd},
        methods: {
            // 点击新增按钮，弹出新增数据源的弹框
            addDbSource(){
                this.$refs.addAlert.$el.style.display = "block";
            },
        }
    }
</script>

<template>
    <div class="DbSource-box">
        <el-button type="primary" icon="" class="selectBtn" @click="deleteSelectDbSource()">批量删除</el-button>
        <db-source-table ref="getSelectData" :Data="Data" v-on:init="init"></db-source-table>
    </div>
</template>

<script>
    import DbSourceTable from "../components/DbSourceManager/DbSourceTable";
    export default {
        name: "DbSourceManager",
        components: {DbSourceTable},
        methods: {
            // 删除选中的数据源（批量删除）
            deleteSelectDbSource(){
                console.log(this.$refs.getSelectData.multipleSelection)
            },
        }
    }
</script>

<template>
    <div class="table-box">
        
    </div>
</template>

<script>
    export default {
        name: "DbSourceTable",
        props:["Data"],
        data(){
            return {
                multipleSelection:[],
                pagesize: 3,
                currpage: 1,
                currId:""
            }
        }
</script>