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