javascript - 基于父组件中的 v-select 更改子组件中变量的值 (Vuetify)

Question

我试图通过在父组件中选择一些值来更改子组件中的 (true/false) 值。我在父组件中有一个 v-select，通过在该 v-select 中选择一个值，它应该将 child 中的值从 true 更改为 false，反之亦然。所以基本上如果我在父组件中选择“rPanel”。标签“rPanel”应该出现在子组件中。我自己尝试了一些东西，但我的代码不起作用。最好的方法是什么？

这是我的代码:

这是名为“SubrackEdit”的父组件:

<template>
<div>
.
.
 <app-tabs class="tabs"
          :rPanel="value.rPanel"
          :threeUExpansion="value.threeUExpansion"
          :threeUCompact="value.threeUCompact"
          :threeU="value.threeU"
          :sixU="value.sixU"
                      ></app-tabs>

<v-select
      v-model="value"
      :items="items"
      chips
      background-color="blue"
      color="blue"
      label="Select Subracks to be Configured:"
      multiple
      outline
    ></v-select>
.
.
</div>
</template>

<script>
.
.
value: ['rPanel', 'threeU', 'sixU', 'threeUCompact', 
'threeUExpansion'],
      items: [
        "rPanel",
        "threeU",
        "sixU",
        "threeUCompact",
        "threeUExpansion"
      ]
    }
.
.
</script>

这是名为“Tabs”的子组件:

<template>
<div >
  .
  .
    <v-tabs centered
            grow
            icons-and-text
            v-model="active"
            color="blue darken-3"
            dark
            slider-color="white"
    >
      <v-tab v-if="sixU" href="#tab-1">
        6U Subrack
        <v-icon>indeterminate_check_box</v-icon>
      </v-tab>

      <v-tab v-if="threeU" href="#tab-2">
        3U Interface
        <v-icon>indeterminate_check_box</v-icon>
      </v-tab>

      <v-tab v-if="threeUCompact" href="#tab-3">
        3U Compact
        <v-icon>indeterminate_check_box</v-icon>
      </v-tab>

      <v-tab v-if="threeUExpansion" href="#tab-4">
        3U Expansion
        <v-icon>indeterminate_check_box</v-icon>
      </v-tab>

      <v-tab v-if="rPanel" href="#tab-5">
        Relay Panel
        <v-icon>indeterminate_check_box</v-icon>
      </v-tab>
    </v-tabs>
.
.
    </div>
</template>

<script>
export default {
  props:["rPanel", "threeU", "sixU", "threeUCompact", 
"threeUExpansion"], 
</script>

Answer 1

您应该使用 props 将数据从父组件传递到子组件，并使用 $emit 事件将更新后的数据从子组件发送到父组件:

在你的父组件中:

  <child :value="val" @update="updateVal" />

在数据对象和方法中:

   data(){
      return{
            val:false
         }
       },
    methods:{
          updateVal(v){//<--- v is the value that's emitted from child component
               this.val=v;
            }
        }

在子组件中:

   this.$emit("update", true);