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

 更新时间:2022年08月25日 10:19:55   作者:会飞的Cool猪  
这篇文章主要介绍了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父子组件调用内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • hansontable在vue中的基本使用教程

    hansontable在vue中的基本使用教程

    handsontable是目前在前端界最接近excel的插件,可以执行编辑,复制粘贴,插入删除行列,排序等复杂操作,这篇文章主要介绍了hansontable在vue中的基本使用,需要的朋友可以参考下
    2022-10-10
  • Vue 获取数组键名的方法

    Vue 获取数组键名的方法

    本篇文章主要介绍了Vue 获取数组键名的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-06-06
  • vue内置组件transition简单原理图文详解(小结)

    vue内置组件transition简单原理图文详解(小结)

    这篇文章主要介绍了vue内置组件transition简单原理图文详解(小结),小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-07-07
  • vue{{}}拼接字符串和换行符方式

    vue{{}}拼接字符串和换行符方式

    这篇文章主要介绍了vue{{}}拼接字符串和换行符方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-12-12
  • vue实现动态路由详细

    vue实现动态路由详细

    我们开发后台管理系统过程中,会由不同的人操作系统,有admin(管理员)、superAdmin(超管),及各种运营、财务人员。为了区别这些人员,会给不同的人分配不一样的角色来展示不同的菜单,这就必须要通过动态路由来实现。下面就来介绍vue实现动态路由,需要的朋友可参考一下
    2021-10-10
  • VUE-Table上绑定Input通过render实现双向绑定数据的示例

    VUE-Table上绑定Input通过render实现双向绑定数据的示例

    今天小编就为大家分享一篇VUE-Table上绑定Input通过render实现双向绑定数据的示例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-08-08
  • 如何在Vue 3中扩展Vue Router链接详解

    如何在Vue 3中扩展Vue Router链接详解

    vue-router是Vue.js官方的路由插件,它和vue.js是深度集成的,适合用于构建单页面应用,这篇文章主要给大家介绍了关于如何在Vue 3中扩展Vue Router链接的相关资料,需要的朋友可以参考下
    2021-06-06
  • 基于Vue3实现的图片散落效果实例

    基于Vue3实现的图片散落效果实例

    最近工作中遇到一个效果还不错,所以想着实现一下,下面这篇文章主要给大家介绍了关于如何基于Vue3实现的图片散落效果的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下
    2022-04-04
  • Vue中tab栏切换的简单实现

    Vue中tab栏切换的简单实现

    本文主要介绍了Vue中tab栏切换的简单实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-07-07
  • 公共Hooks封装文件下载useDownloadFile实例详解

    公共Hooks封装文件下载useDownloadFile实例详解

    这篇文章主要为大家介绍了公共Hooks封装文件下载useDownloadFile实例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-11-11

最新评论