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

Kiona ·

更新时间:2024-11-10

· 749 次阅读

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

VUE 调用示例

1024 个赞