父组件直接触发子组件中的函数

还是上回点击按钮出现弹窗，弹窗中有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