vue el-dialog 如何在子组件使用
1.父组件<div class="lcyHeadline" @click="xgystz" >新供应商拓展</div><table-chart:xgystzShow="xgystzShow" @close-dialogStatus="CloseDialog"></table-chart>data(){return{xgystzShow: false,
·
1.父组件
<div class="lcyHeadline" @click="xgystz" >
新供应商拓展
</div>
<table-chart :xgystzShow="xgystzShow" @close-dialogStatus="CloseDialog"></table-chart>
data(){
return{
xgystzShow: false, //默认不显示弹窗
}
}
方法:
xgystz() {
this.xgystzShow = true
},
CloseDialog () {
this.xgystzShow = false
},
2.子组件
<el-dialog
:visible.sync="vis"
@close="closeDialog"
:show-close="true"
align="center"
:title="lcyTitle"
:append-to-body='true'
></el-dialog>
props: {
xgystzShow: Boolean,
},
data(){
return{
vis: false,
}
},
methods:{
closeDialog () {
this.$emit('close-dialogStatus', false)
}
},
watch: {
xgystzShow (newValue, oldValue) {
this.vis = newValue
console.log('newValue',newValue)
}
}
更多推荐
已为社区贡献7条内容
所有评论(0)