利用dialog模拟confirm
子组件:
<template>
<div>
<el-dialog
:title="title"
:visible.sync="visible"
@close="$emit('update:isConfirm', false)" //通过update:变量来更新变量值
:isConfirm="isConfirm"
width="30%">
<div v-text="confirmDec"></div>
<span slot="footer" class="dialog-footer">
<el-button @click="visible = false">返回</el-button>
<el-button type="primary" @click="handleClick" v-text="btnText"></el-button>
</span>
</el-dialog>
</div>
</template>
data() {
return {
title : '',
confirmDec : '',
visible: this.isConfirm, //通过值来控制组件显示隐藏
isConfirmEnter : false,
btnText : ''
}
},
props: {
isConfirm: {
type: Boolean,
default: false
}
},
watch: {
isConfirm () {
this.visible = this.isConfirm; //监听控制
}
},
methods : {
handleClick (evevt){
this.$emit('msgfromchild',event.target); //通过emit传递事件给父组件
}
}
父组件:
<confirm :is-confirm.sync="isReaderConfirm" ref="confirmReaderComponent" @msgfromchild="readerConfirm">
</confirm> //通过sync修饰符 它会被扩展为一个自动更新父组件属性的 v-on 侦听器
this.isReaderConfirm = true; //子组件显示
this.$refs.confirmReaderComponent.xx = 'xxxxx'; //父组件通过$refs赋值
readerConfirm (){
//这个里面就可以写触发事件之后的操作
}