父组件
<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>
效果
最后
感觉文章好的话记得点个心心和关注和收藏,有错的地方麻烦指正一下,如果需要转载,请标明出处,多谢!!!