prop父组件给子组件传值

今天的项目中有一个类似tab切换的功能，切换的时候需要根据按钮所代表的不同状态对子组件的数据进行修改，小小的记录一下

1. 情况一
   如图，切换的时候修改单位

   
   image.png
   

   实现

父组件中

<!-- 子组件动态赋值 -->
<Proverview :tender="tender"></Proverview>

<!-- data中定义，切换时修改tender值 -->
data() {
    return {
      tender: '全部',
    };
 }

子组件中

<!-- props对值类型进行定义 -->
props: {
    tender: {
      type: String,
      required: true,
    },
  },

<!-- 根据props传过来的tender渲染内容 -->
 <div class="companyArray" v-if="tender=='全部'">
        <span>建设单位：北京城市副中心站综合枢纽建设管理有限公司</span>
        <span>设计单位：市政设计院、中铁设计集团、建筑设计院、阿海普</span>
</div>
<div class="companyArray" v-else-if="tender=='一标段'">
        <span>监理单位：华城监理、赛瑞斯</span>
        <span>施工单位：中铁建设、北京建工、中铁十六局</span>
</div>
<div class="companyArray" v-else-if="tender=='二标段'">
        <span>监理单位：逸群监理、北高监</span>
        <span>施工单位：中铁建工、北京城建、中铁一局</span>
</div>
<div class="companyArray" v-else-if="tender=='三标段'">
        <span>监理单位：未招标</span>
        <br />
        <span>施工单位：未招标</span>
</div>
<div class="companyArray" v-else>
        <span>监理单位：未招标</span>
        <br />
        <span>施工单位：未招标</span>
</div>

2. 情况二
   如图，切换的时候修改图中渲染所需数据

   
   image.png
   

   实现

父组件中

<!-- 子组件动态赋值 -->
<Evnstate :tender="tender"></Evnstate>

<!-- data中定义，切换时修改tender值 -->
data() {
    return {
      tender: '全部',
    };
 }

子组件中

<!-- props对值类型进行定义 -->
props: {
    tender: {
      type: String,
      required: true,
    },
  },
<!-- 根据props传过来的tender修改渲染所需数据，要利用watch监听新的传过来的值 -->
  watch: {
    tender: {
      handler(newValue, oldValue) {
        if (newValue == '一标段') {
          this.evnData = [{state: '一标',}];
        } else if (newValue == '二标段') {
          this.evnData = [{state: '二标'}];
        } else if (newValue == '三标段') {
          this.evnData = [{state: '三标'}];
        } else if (newValue == '四标段') {
          this.evnData = [{state: '四标'}];
        } else {this.evnData = [{state: '一标' },{state: '二标'}, {state: '三标'},{state: '四标'}];
        }
      },
      deep: true,
    },
  },