vue彈窗父子組件調(diào)用問(wèn)題示例詳解

第vue彈窗父子組件調(diào)用問(wèn)題示例詳解目錄一、vue彈窗父子組件emit傳圖片二、vue父組件調(diào)用子組件里的不同方法

一、vue彈窗父子組件emit傳圖片

1、:modal-append-to-body=false為了解決elementui中引入dialog窗口組件后遮罩層會(huì)擋住dialog窗口的用處，默認(rèn)為true，改為false即可解決。

2、此彈窗主要為了解決收到下位機(jī)急停信號(hào)后，上位機(jī)前臺(tái)顯示彈窗的重復(fù)性。

//此為子組件（customComponents.vue）

div

el-dialog

:visible.sync="dialogVisible"

width="25%"

:modal-append-to-body="false"

divslot="title"

img:src="url"

span提示/span

/div

span{{this.message}}/span

spanslot="footer"

el-button

type="primary"

size="small"

@click="dialogVisible=false"確定/el-button

/span

/el-dialog

/div

script

exportdefault{

props:{

url:String,//String為定義參數(shù)類(lèi)型，例如圖片地址就是String類(lèi)型的

message:String,//String為定義參數(shù)類(lèi)型

data(){

return{

dialogVisible:true,

/script

//此為父組件（treatmentInterface.vue）

customComponents

v-if="empStopStatus==0"

:url="iconDanger"

:message='messageDanger'/customComponents

divv-else/div

script

//引入局部組件（子組件）

importcustomComponentsfrom"../customComponents/customComponents"

exportdefault{

name:"",

components:{customComponents},

data(){

return{

iconDanger:require('../../assets/icons/customComponents/danger.png'),

messageDanger:"急停按鈕被按下！請(qǐng)先檢查設(shè)備...",

/script

二、vue父組件調(diào)用子組件里的不同方法

1、vue的動(dòng)態(tài)方法綁定

主要看：

①：el-button標(biāo)簽里的@click

②：methods里面的buttonClick(methodName)

//此為子組件（customComponents.vue）

div

el-dialog

:visible.sync="dialogVisible"

width="25%"

:modal-append-to-body="false"

divslot="title"

img:src="url"

span提示/span

/div

span{{this.message}}/span

spanslot="footer"

el-button

type="primary"

size="small"

@click="buttonClick(methodsName)"確定/el-button

/span

/el-dialog

/div

script

exportdefault{

props:{

url:String,//String為定義參數(shù)類(lèi)型，例如圖片地址就是String類(lèi)型的

message:String,//String為定義參數(shù)類(lèi)型

data(){

return{

dialogVisible:true,

methods:{

buttonClick(methodName){

this[methodName]()

treatFinished(){

console.log("執(zhí)行了..........")

emergencyStop(){

this.dialogVisible=false

/script

至此，已完成子組件里不同方法的綁定，下一步就要在父組件里調(diào)用上方子組件里的方法了。

2、父組件調(diào)用子組件方法

//此為父組件（treatmentInterface.vue）

!--治療完成彈窗--

customComponents

v-if="treatStatus==1"

:url="iconDone"

:message='messageFinished'

:methodsName='treatFinished'/customComponents

divv-else/div

!--急停被按下彈窗--

customComponents

v-if="empStopStatus==0"

:url="iconDanger"

:message='messageDanger'

:methodsName='emergencyStop'/customComponents

divv-else/div

script

//引入局部組件（子組件）

importcustomComponentsfrom"../customComponents/customComponents"

exportdefault{

components:{customComponents},

data(){

return{

iconDanger:require('../../assets/icons/