4
#yyds干货盘点# 利用element和vue结合实现父子组件弹窗功能
source link: https://blog.51cto.com/u_15449946/5654907
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
#yyds干货盘点# 利用element和vue结合实现父子组件弹窗功能
精选 原创首先我们看一下子组件内的弹窗代码，这是element里的一个弹框组件样式 ’append-to-body ‘是凌驾于其他页面之上的页面意思。
<template>
<div class='aaa'>
<el-dialog title="外层 Dialog" :visible.sync="outerVisible">
<el-dialog
width="30%"
title="内层 Dialog"
:visible.sync="innerVisible"
append-to-body>
</el-dialog>
<div slot="footer" class="dialog-footer">
<el-button @click="outerVisible = false">取 消</el-button>
<el-button type="primary" @click="innerVisible = true">打开内层 Dialog</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
export default {
data() {
return {
outerVisible: false,
innerVisible: false
};
}
}
</script>
<div class='aaa'>
<el-dialog title="外层 Dialog" :visible.sync="outerVisible">
<el-dialog
width="30%"
title="内层 Dialog"
:visible.sync="innerVisible"
append-to-body>
</el-dialog>
<div slot="footer" class="dialog-footer">
<el-button @click="outerVisible = false">取 消</el-button>
<el-button type="primary" @click="innerVisible = true">打开内层 Dialog</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
export default {
data() {
return {
outerVisible: false,
innerVisible: false
};
}
}
</script>
当子组件的代码写好了，我们需要父组件来引入
<template>
<el-button type="text" @click="open()">点击打开子组件页面</el-button>
<aaa ref='aaa'></aaa>
</template>
<script>
import aaa from '../aaa.vue'
export default {
data() {
return {
};
},
components:{
aaa,
},
methods:{
open(){
this.$refs.aaa.outerVisible = true
}
}
}
</script>
<el-button type="text" @click="open()">点击打开子组件页面</el-button>
<aaa ref='aaa'></aaa>
</template>
<script>
import aaa from '../aaa.vue'
export default {
data() {
return {
};
},
components:{
aaa,
},
methods:{
open(){
this.$refs.aaa.outerVisible = true
}
}
}
</script>
然后当点击打开子组件页面的按钮时就可以打开弹窗页面了
- 赞
- 收藏
- 评论
- 分享
- 举报
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK