vue弹窗父子组件调用问题示例详解
一、vue弹窗 父子组件 emit 传图片
1、:modal-append-to-body="false"为了解决element ui中引入dialog窗口组件后遮罩层会挡住dialog窗口的用处,默认为true,改为false即可解决。
2、此弹窗主要为了解决收到下位机急停信号后,上位机前台显示弹窗的重复性。
//此为子组件(customComponents.vue) <div> <el-dialog :visible.sync="dialogVisible" width="25%" :modal-append-to-body="false"> <div slot="title" class="dialog-header-title"> <img :src="url" > <span> 提示</span> </div> <span>{{this.message}}</span> <span slot="footer" class="dialog-footer"> <el-button type="primary" size="small" @click="dialogVisible = false" >确 定 </el-button> </span> </el-dialog> </div> <script> export default { props: { url: String,//String为定义参数类型,例如图片地址就是String类型的 message: String,//String为定义参数类型 }, data() { return { dialogVisible: true, }; }, } </script>
//此为父组件(treatmentInterface.vue) <customComponents v-if="empStopStatus== 0" :url="iconDanger" :message='messageDanger' ></customComponents> <div v-else></div> <script> //引入局部组件(子组件) import customComponents from "../customComponents/customComponents" export default { name: " ", components: {customComponents}, data() { return { iconDanger: require('../../assets/icons/customComponents/danger.png'), messageDanger: "急停按钮被按下!请先检查设备...", }; }, } </script>
二、vue父组件调用子组件里的不同方法
1、vue的动态方法绑定
主要看:
①:<el-button>标签里的@click
②:methods里面的buttonClick(methodName)
//此为子组件(customComponents.vue) <div> <el-dialog :visible.sync="dialogVisible" width="25%" :modal-append-to-body="false"> <div slot="title" class="dialog-header-title"> <img :src="url" > <span> 提示</span> </div> <span>{{this.message}}</span> <span slot="footer" class="dialog-footer"> <el-button type="primary" size="small" @click="buttonClick(methodsName)">确 定</el-button> </span> </el-dialog> </div> <script> export default { props: { url: String,//String为定义参数类型,例如图片地址就是String类型的 message: String,//String为定义参数类型 }, data() { return { dialogVisible: true, }; }, methods:{ buttonClick(methodName) { this[methodName]() }, treatFinished() { console.log("执行了..........") }, emergencyStop() { this.dialogVisible = false } }, } </script>
至此,已完成子组件里不同方法的绑定,下一步就要在父组件里调用上方子组件里的方法了。
2、父组件调用子组件方法
//此为父组件(treatmentInterface.vue) <!-- 治疗完成弹窗 --> <customComponents v-if="treatStatus== 1" :url="iconDone" :message='messageFinished' :methodsName='treatFinished'></customComponents> <div v-else></div> <!-- 急停被按下弹窗 --> <customComponents v-if="empStopStatus== 0" :url="iconDanger" :message='messageDanger' :methodsName='emergencyStop'></customComponents> <div v-else></div> <script> //引入局部组件(子组件) import customComponents from "../customComponents/customComponents" export default { components: {customComponents}, data() { return { iconDanger: require('../../assets/icons/customComponents/danger.png'), messageDanger: "急停按钮被按下!请先检查设备...", treatFinished: 'treatFinished', emergencyStop: 'emergencyStop', }; }, } </script>
到此这篇关于vue弹窗父子组件调用的文章就介绍到这了,更多相关vue父子组件调用内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
相关文章
VUE-Table上绑定Input通过render实现双向绑定数据的示例
今天小编就为大家分享一篇VUE-Table上绑定Input通过render实现双向绑定数据的示例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧2018-08-08公共Hooks封装文件下载useDownloadFile实例详解
这篇文章主要为大家介绍了公共Hooks封装文件下载useDownloadFile实例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2022-11-11
最新评论