父組件直接觸發子組件中的函數

還是上回點擊按鈕出現彈窗，彈窗中有tree組件的功能。我們需要封一個彈窗組件，在彈窗組件里調用tree組件，而為了各個頁面都可以使用這個彈窗，我們在父組件中（這個父組件是彈窗組件的父組件）點擊按鈕（或者需要彈出彈窗的任何東西）時會觸發一個click事件，在它觸發的函數中調用彈窗組件中的負責展開功能的函數，就可以完成功能 。我們以下代碼只做到父組件觸發子組件中的函數，其他功能代碼都已經刪掉。

父組件:

<template>
    <div>
        <button @click="dialogOpen">父組件的觸發彈窗按鈕</button>
        <commonfiltertree
        ref="dialogtree"></commonfiltertree>
    </div>
</template>
<script>
import commonfiltertree from "@/components/newCommon/dialog/treeDialog.vue";
export default {
    components: {
        commonfiltertree
    },
    methods: {
        dialogOpen() {
            this.$refs.dialogtree.dialogOpen();  // 調用子組件的方法dialogOpen
        }
    }

};
</script>

子組件:

<template>
    <div class="air-treeDialog-wrappers">
        <el-dialog
         :visible.sync="dialogVisible"></el-dialog>
    </div>
</template>
<script>
import commonfiltertree from "@/components/newCommon/tree/tree.vue";
export default {
    data() {
        return {
            dialogVisible: false,
        };
    },
    methods: {
        //打開彈出框
        dialogOpen() {
            this.dialogVisible = true;
        },
        //關閉彈出框
        dialogClose() {
            this.dialogVisible = false;
        }
    }
};
</script>

over