51工具盒子

依楼听风雨
笑看云卷云舒,淡观潮起潮落

Vue点击父组件值引起子组件样式变化

#父组件中引用子组件:

<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>
赞(4)
未经允许不得转载:工具盒子 » Vue点击父组件值引起子组件样式变化