#父组件中引用子组件:
<KPXX
:showStars ="showStars"
ref="selectKpxx"></KPXX>
父组件中data数据
data () {
return {
ruleForm: {
qyxz:''
},
//给子组件KPXX传递参数
showStars: {
display: 'none'
}
}
}
//钩子函数
created () {
//随便一个值这里,主要是演示真实情况调用接口所以写这样
const lsh = this.$route.params.lsh
if (lsh){
selectZwLkgl(lsh).then(response => {
this.ruleForm = response.data
if (this.ruleForm.qyxz === '0'){
this.$set(this.showStar,'display','')
}else {
this.$set(this.showStar,'display','none')
}
})
}
}
//watch监听
watch:{
'ruleForm.qyxz': function (val) {
this.$refs.selectKpxx.showBx(val);
}
},
子组件
<template>
<el-form>
<el-descriptions-item>
<template slot="label">
邮箱
<pms-required :style="showStar"/>
</template>
</el-descriptions-item>
</el-descriptions>
</el-form>
</template>
<script>
export default {
name: 'kpxx',
//接受父组件传递过来的参数
props: ['showStars'],
data () {
return {
showStar: {
display: ''
}
}
},
created () {
this.showStar = this.showStars;
},
methods: {
//子组件方法,提供给给父组件调用
showBx(val){
if (val !== undefined && val != null && val === '0'){
this.$set(this.showStar,'display','')
}else {
this.$set(this.showStar,'display','none')
}
}
}
}
</script>
<style scoped>
</style>