快捷導(dǎo)航

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

更新時(shí)間：2022年08月25日 10:19:55 作者：會(huì)飛的Cool豬

這篇文章主要介紹了vue彈窗父子組件調(diào)用問題，本文通過示例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下

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

1、:modal-append-to-body="false"為了解決element ui中引入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">
 
		<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為定義參數(shù)類型，例如圖片地址就是String類型的
			message: String,//String為定義參數(shù)類型
		},
	    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: "急停按鈕被按下！請(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">
 
		<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為定義參數(shù)類型，例如圖片地址就是String類型的
			message: String,//String為定義參數(shù)類型
		},
	    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>
<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: "急停按鈕被按下！請(qǐng)先檢查設(shè)備...",
            treatFinished: 'treatFinished',
			emergencyStop: 'emergencyStop',
	      };
	    },
	}
</script>

到此這篇關(guān)于vue彈窗父子組件調(diào)用的文章就介紹到這了,更多相關(guān)vue父子組件調(diào)用內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: