vue父子组件调用
会飞的Cool猪 人气:1一、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>加载全部内容