Vue父子组件传值异常：父组件复选框状态未同步至子组件

你遇到的核心问题是父子组件间的数据没有正确传递，同时父组件的数据结构和模板绑定也存在小问题，导致子组件拿不到players.Scholarship的值。下面一步步拆解问题并修正：

1. 父组件Players.vue的核心问题 #

你的data里players是一个数组[]，但模板里直接绑定players.Scholarship——数组本身没有Scholarship属性，这样的绑定会给数组对象添加一个额外的属性，这不是合理的用法。如果是单个玩家的场景，应该把players改成一个对象：

<script>
import * as $ from "jquery";
import Parents from "./Details/Parents.vue";
export default {
  components: { appParents: Parents },
  data: function() {
    return {
      // 把数组改成单个玩家对象，初始化Scholarship为布尔值
      player: { Scholarship: false },
      parents: [],
      characters: [],
      selectedArrayIndex: "",
      team: [],
      showInfo: false,
    };
  },
};
</script>

同时修正模板里的绑定：

<template>
<div class="row">
  <div class="d-inline col-lg-6 col-md-6 col-sm-6">
    <div class="row">
      <div class="d-inline col-lg-6 col-md-6 col-sm-6">
        <b>Scholarship Player</b>
      </div>
      <div class="d-inline col-lg-6 col-md-6 col-sm-6">
        {{ player.Scholarship }}
        <input type="checkbox" id="checkbox" v-model="player.Scholarship">
      </div>
    </div>
  </div>
</div>
</template>

2. 通过Props传递数据到子组件PlayerTabs.vue #

子组件目前没有任何渠道获取父组件的Scholarship值，需要通过Vue的props机制传递：

步骤1：父组件传递props #

在父组件中使用PlayerTabs时，把player.Scholarship作为属性传过去（假设你注册子组件的名称是app-player-tabs）：

<!-- 在Players.vue的模板中添加子组件调用，传递props -->
<app-player-tabs :scholarship="player.Scholarship"></app-player-tabs>

步骤2：子组件接收props #

在PlayerTabs.vue中定义props来接收这个值，然后就可以在模板中使用了：

<script>
import * as $ from "jquery";
import Players from "./PlayerBasicInfo/Players.vue";
import Histories from "./History/Histories.vue";
import Timetables from "./Timetable/Timetables.vue";
export default {
  components: {
    appPlayers: Players,
    appTimetables: Timetables,
    appHistories: Histories,
  },
  // 定义props接收父组件传递的值
  props: {
    scholarship: {
      type: Boolean,
      default: false // 默认未勾选
    }
  },
  methods: {
    changeSelectedComp: function() {
      this.$store.state.selectedComp = "appTeamInfo";
    }
  }
};
</script>

步骤3：修正子组件模板的条件渲染 #

你原来的v-if和v-else内容完全一样，没必要重复，直接根据scholarship的值决定是否显示标签页即可：

<template>
<div>
  <div class="row" style="margin-bottom:20px">
    <button class="btn btn-primary" @click="changeSelectedComp">Back</button>
  </div>
  <vue-tabs>
    <v-tab title="Basic">
      <app-players></app-players>
    </v-tab>
    <v-tab title="History">
      <app-histories></app-histories>
    </v-tab>
    <v-tab title="Timetable">
      <app-timetables></app-timetables>
    </v-tab>
    <!-- 只有当scholarship为true时，才显示这个标签页 -->
    <v-tab v-if="scholarship" title="Scholarship">
      <app-timetables></app-timetables>
    </v-tab>
  </vue-tabs>
</div>
</template>

3. 额外注意事项 #

• 如果你的场景是多个玩家（即players确实是数组），那么你需要先选中某个玩家（比如通过索引selectedArrayIndex），然后绑定players[selectedArrayIndex].Scholarship，再把这个值传递给子组件。
• 尽量避免直接修改$store.state，推荐使用mutations来修改状态，这是Vuex的最佳实践。

内容的提问来源于stack exchange，提问作者Ramanujan Taylor