如何在Vue中更改子组件数据？

Question

我正在使用一个内部带有标签的组件。在 Head 组件中（父组件）：

<v-btn @click="setSelectedTab('Set') "> ... 
<component :is="selectedTab"></component>

在 Set 组件（子组件）中，我使用了一些会改变数据的发射。

 <div>
    <head-set
      v-show="showHeadSet"
      @settings="
        showHeadSet = false;
        showScreenSettings = true;
      "
      @robotix="
        showHeadSet = false;
        showRobotix = true;
      "
    >
    </head-set>
    <Robotix v-show="showRobotix"></Robotix>
    <screen-settings v-show="showScreenSettings"></screen-settings>
  </div>

<script>
data() {
    return {
      showHeadSet: true,
      showRobotix: false,
      showScreenSettings: false,
    };
  },
</script>

当按下按钮时（@click="setSelectedTab('Set') "），我希望 Set（子组件）中的数据像开头一样返回（showHeadSet: true,showRobotix: false,showScreenSettings: false,）。

你知道怎么做吗？

Answer 1

在您的案例中，将数据传递给子组件的最简单方法是使用属性。

你的父组件看起来像这样：

<template>
  <div>
    <v-btn @click="setSelectedTab('Set') "> ... </v-btn>
    <component :is="selectedTab" :settings="yourSettings"></component>
  </div>
</template>

<script>
export default {
  data: () => {
    yourSettings: {
      showHeadSet: true,
      showRobotix: false,
      showScreenSettings: false
    }
  },

  methods: {
    setSelectedTab() {
      // your code
      this.yourSettings = {
        showHeadSet: true,
        showRobotix: false,
        showScreenSettings: false
      }
    }
  }
}
</script>

在您的子组件中，您必须像这样添加道具定义

<script>
export default  {
  props: {
    settings: {
      type: Object,
      required: true
    }
  }
}
</script>

您可以使用计算变量或数据变量等道具，并根据需要覆盖设置。在父组件的setSelectedTab 方法中，您只需将数据覆盖回默认值即可。

您可以查看docs 了解有关道具的更多信息。