前端Vue父组件点击按钮打开子组件弹窗案例

父组件

<template>
    <div>
        <indexChild ref="child"></indexChild>
        <el-button  @click="open">打开弹窗</el-button>
    </div>
</template>
<script>
import indexChild from "../../components/indexChild.vue";
export default {
    components: {
        indexChild
    },
    data () {
        return {
        };
    },
    methods: {
        open () {
            this.$refs.child.open(); // 这样可以直接访问子组件方法,用ref拿子组件方法
        }
    }
}
</script>

子组件

<template>
    <div>
        <el-dialog title="收货地址" :visible.sync="dialogFormVisible">
            <span>这是一段信息</span>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
export default {
    data () {
        return {
            dialogFormVisible: false,
        };
    },
    methods: {
        open () { // 在父组件调用打开
            this.dialogFormVisible = true
        }
    }
};
</script>

效果

最后

感觉文章好的话记得点个心心和关注和收藏，有错的地方麻烦指正一下，如果需要转载,请标明出处，多谢！！！