Question

我试图通过选择父组件中的某些值来更改子组件中的（真/假）值。我在父组件中有一个v-select，通过在该v-select中选择一个值，它应该将子级中的值从true更改为false，反之亦然。所以基本上，如果我在父组件中选择“ rPanel”。选项卡“ rPanel”应显示在子组件中。我自己尝试了一些操作，但是我的代码无法正常工作。最好的方法是什么？

这是我的代码：

这是称为“ SubrackEdit”的父组件：

x = App("/Applications/Calculator.app")
x.open()

这是称为“标签”的子组件：

<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>

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);

Answer 2

如果您有要更新的动态属性，我发现这是一种更好的方法

父母

<BaseSelect v-model.trim="item" :items="items"/>

data() {
  return {
    item: "Hello",
    items: ['Hello', 'Hi']
  }
}

然后子组件

<v-select :value="value" :items="items" solo @input="updatevalue"></v-select>

export default {
  name: 'BaseSelect',
  props: {
    value: { type: String },
    items: { type: Array, required: true }
  },
  methods: {
    updateValue(value) {
     this.$emit('input', value);
    }
  }
}

在这种情况下，您无需仅在Parent组件中定义方法即可更改值

根据父组件中的v-select更改子组件中变量的值（Vuetify）

2 个答案: