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

目录
  • 一、vue弹窗 父子组件 emit 传图片
  • 二、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父子组件调用内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • 详解Vue注册组件的方法

    目录 简介 说明 官网网址 组件名字 全局注册(一般用于框架) 局部注册(不常用) 模块系统 在模块系统中局部注册(常用) 基础组件的自动化全局注册 简介 说明 本文介绍Vue注册组件的方法. Vue注册组件有这几种:全局注册.局部注册.在模块系统中注册. 官网网址 https://v2.cn.vuejs.org/v2/guide/components-registration.html 组件名字 注册一个组件的时候,需要给它一个名字.比如在全局注册: Vue.component('my-com

  • Vue动态组件与内置组件浅析讲解

    目录 一.动态组件 二.内置组件 一.动态组件 在vue中,有很多的组件可以挂载同一个挂载点上面,要在同一个挂载的点上的多个组件之间可以实现动态的切换渲染,我们可以通过内置组件component的is属性动态的绑定组件,然后我们就可以根据is的值来决定哪一个组件要被渲染,非常的方便. 我们通过一点简单的实例代码可以加深了解: 示例代码: <!DOCTYPE html> <html lang="en"> <head> <title>组件之间

  • Vue子组件内的props对象参数配置方法

    目录 一.简单数据类型 1.布尔类型 Boolean 正确写法 : 2.数字类型 Number 正确写法 : 3.字符串类型 String 正确写法 : 二.复杂数据类型 1.数组 Array 错误写法 : Eslint 语法报错 : 正确的常规写法 : 或是用 箭头函数 : 2.对象 Object 错误写法 : 正确的常规写法 : 3.函数 Function 正确写法 : 这篇文章主要介绍了Vue子组件内的props对象里的default参数是如何定义 Array.Object.或Functi

  • VUE组件简明讲解

    目录 前言 一.全局组件 1.定义 2.全局组件调用 二.局部组件 1.定义 2.局部组件调用 前言 为什么vue就开始在前几年就流行并且实用起来了?这主要的是因为由于vue的一个最强大的功能就是vue的组件,vue的组件到底有什么强大的功能呢?原因有两个,一个是组件的复用性很高:另一个是可以减少重复性的开发. 一.全局组件 1.定义 全局组件的语法是:vue.component(‘组件名’,{配置选项}): 然后,我们进一步理解一下,组件名应该怎么定义:组件名的定义规则是,使用短横线分隔命名,

  • Vue transition过渡组件详解

    目录 一.vue里面的transition组件 二.transition组件应用CSS过渡 (1)单元数/组件过渡 (2)多个元素过渡 (3)多个组件过渡 (4)列表过渡 三.JavaScript钩子 一.vue里面的transition组件 Vue提供了这个transition组件,可以使得在v-if条件渲染.v-show条件显示.动态组件的时候可以给到任意元素和组件添加了进入或离开元素过渡. 二.transition组件应用CSS过渡 在应用css过渡的时候,transition组件会在恰当

  • Vue组件层级关系详细分析

    目录 前言 一.全局组件的层级关系 二.局部组件的层级关系 前言 在这之前,我们已经了解到了vue的组件有哪一些以及这些组件有什么作用,关于组件的博客,大家可以看本博主的往期文章:传送门 可以关注更多的博文进行学习了解.好的,我们进入今天的主题,我们知道组件可以进行调用,网页也可以通过分割的方式在页面中进行嵌套,并且可以在组件层级形成父级和子级.兄弟级别的关系,使得网页开发更加的富有层次感. 一.全局组件的层级关系 全局组件之间的层级关系是在vue进行代码程序执行调用的时候才确定的.我们可以通过

  • vue子组件通过.sync修饰符修改props属性方式

    目录 子组件通过.sync修饰符修改props属性 子组件修改父组件prop的几种方式 常用方式 取巧方式 子组件通过.sync修饰符修改props属性 在vue子组件中,如果我们直接修改props中的属性,会报错: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed

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

    目录 一.vue弹窗 父子组件 emit 传图片 二.vue父组件调用子组件里的不同方法 一.vue弹窗 父子组件 emit 传图片 1.:modal-append-to-body="false"为了解决element ui中引入dialog窗口组件后遮罩层会挡住dialog窗口的用处,默认为true,改为false即可解决. 2.此弹窗主要为了解决收到下位机急停信号后,上位机前台显示弹窗的重复性. //此为子组件(customComponents.vue) <div> &

  • Vue非父子组件之间的通信方式详解

    目录 非父子组件的通信 1.Provide和Inject 1.1基本使用 1.2处理响应式数据(了解) 2.全局事件总线 总结 非父子组件的通信 此篇讲解的是, 在学习状态管理之前, 非父子间通信的方案 在开发中,我们构建了组件树之后,除了父子组件之间的通信之外,还会有非父子组件之间的通信. 这里我们主要讲两种方式: Provide/Inject: 全局事件总线: 1.Provide和Inject 1.1基本使用 Provide/Inject用于非父子组件之间共享数据: 比如有一些深度嵌套的组件

  • vue的生命周期钩子与父子组件的生命周期详解

    目录 vue的生命周期钩子的介绍 父子组件的生命周期 加载渲染过程 父组件更新过程 子组件更新过程 父子组件更新过程 销毁过程 代码示例 created和mounted的区别 vue的生命周期钩子的介绍 vue官网中提供的vue的生命周期钩子图 vue的生命周期可以分为8个阶段: 1.创建vue实例涉及的两个钩子 (1)beforeCreate:创建前,vue实例初始化之前调用. 此时的数据观察和事件配置都还没有准备好,而此时的实例中的data和el还是underfined状态,不可用的.Dom

  • Vue 使用Props属性实现父子组件的动态传值详解

    如下所示: <!DOCTYPE html> <html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.jsdelivr.net/npm/vue&quo

  • Vue2.0父子组件传递函数的教程详解

    Vue.js 是什么 Vue.js (读音 /vjuː/,类似于 view) 是一套构建用户界面的渐进式框架.与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计.Vue 的核心库只关注视图层,它不仅易于上手,还便于与第三方库或既有项目整合.另一方面,当与单文件组件和 Vue 生态系统支持的库结合使用时,Vue 也完全能够为复杂的单页应用程序提供驱动. 学习笔记:在vue2.0中,父组件调用子组件时,想要将父组件中的函数体也做传递. 1. 通过props :需要从子组件传参数到父组件时适

  • vue中component组件的props使用详解

    本文介绍了 vue中component组件的props使用详解,分享给大家,具体如下: props使用方法 Vue.component('my-component',{ props:['message'], template:'<div class="tem1">{{message}}</div>' }); <my-component message="hello"></my-component> 注意:props 的

  • Vue.js实现watch属性的示例详解

    目录 1.写在前面 2.watch的实现原理 3.立即执行的watch与回调执行时机 立即执行的回调函数 回调函数的执行时机 4.过期的副作用函数和cleanup 5.写在最后 1.写在前面 在上篇文章中,我们讨论了compted的实现原理,就是利用effect和options参数进行封装.同样的,watch也是基于此进行封装的,当然watch还可以传递第三参数去清理过期的副作用函数.不仅可以利用副作用函数的调度性,去实现回调函数的立即执行,也可以控制回调函数的执行时机. 2.watch的实现原

  • svgicon组件使用方法示例详解

    目录 场景 编写SvgIcon组件 组件文件结构 icons文件结构 vue.config.js配置 最终效果 场景 最近在研发产品的过程中,ued切了很多svg的图片:咱们在使用过程中除了背景图再就是使用<img :src="url"/>进行使用. 在你进行公共组件编写的时候,使用图片路径这种方式编写完组件发布之后:在再项目中引入已发布的组件,在你运行代码的时候图片路径会附带上当前运行的域名,导致图片显示不出来. 那么怎么解决这种问题呢? 和UED进行沟通让他们把这种sv

  • 微前端之Web组件自定义元素示例详解

    目录 我们知道的 Web组件使用 名称规范 组件传参数并可以写模板包括js和css Shadow Dom 影子节点 类中的构造函数和钩子函数 getter/setter属性和属性反射 扩展原生 HTML 我们知道的 第一:我们熟知的HTML标签有 a, p, div, section, ul, li, h2, article, head, body, strong, video, audio 等等 第二:我们知道,a标签是链接,p标签是段落,div是块级,h2是字体,strong 是粗体,vid

  • vue electron实现无边框窗口示例详解

    目录 一.前言 二.实现方案 1.创建无边框窗口 2.创建windows窗口控件组件 三.后记 一.前言 无边框窗口是不带外壳(包括窗口边框.工具栏等),只含有网页内容的窗口.对于一个产品来讲,桌面应用带边框的很少,因为丑(我们的UI觉得--与我无关-.-).因此我们就来展开说下,在做无边框窗口时候需要注意的事项以及我踩过的坑. 二.实现方案 1.创建无边框窗口 要创建无边框窗口,只需在 BrowserWindow的 options 中将 frame 设置为 false: const { Bro

随机推荐