文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

vue弹窗父子组件调用问题示例详解

2024-04-02 19:55

关注

一、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父子组件调用内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯