如何在Vuejs中將父母的道具傳給孩子

Question

我有一個名為Stepper的父組件，它包含名為ShortSummary的子組件。 我試圖通過點擊radiobutton將步進器中的道具傳遞給ShortSummary 。 但它不起作用！ 這就是我所做的。 這是步進器 ：

<v-radio-group row v-model="voltage" >
    <v-radio
    v-for="n in radioNames"
    :key="n"
    :label="n"
    :value="n"></v-radio>
</v-radio-group>

<app-short-summary :voltage="voltage" ></app-short-summary>

<script>
import ShortSummary from "./ShortSummary";
    data() {
      return {
        voltage:'',
        radioNames:
        ['24V to 36V',
          '48V to 72V',
          '96V to 110V']
    },
    components:{
      appShortSummary: ShortSummry
    }
}
</script>

這是ShortSummary ：

<v-list-tile
    :key="item.title"
    avatar
    ripple
    @click="toggle(index)">
    <v-list-tile-content>
         {{item.action}}
    </v-list-tile-content>
</v-list-tile>

<script>
export default {
  props:['voltage']
  data () {
    return {
      selected: [2],
      items: [
        {
          action: `Voltage: ${this.voltage}`
        },
        {
          action: 'Weight: POOF'
        },
        {
          action: 'Size: BOOM'
        },
        {
          action: '2oo2? Need the logic document'
        },
        {
          action: 'Price: Very very expensive'
        }
      ]
    }
  },
}
</script>

目前它顯示電壓為空白。 我想要Voltage: ${this.voltage}來顯示從步進器上的Voltage: ${this.voltage}按鈕中選擇的電壓值

Answer 1

組件的data對象初始化之前this是可用的，因此this.voltage是不確定的。

而是將您的items作為計算道具。

<script>
export default {
  props:['voltage']
  data () {
    return {
      selected: [2],
    }
  },
  computed: {
   items() {
     return [
        {
          action: `Voltage: ${this.voltage}`
        },
        {
          action: 'Weight: POOF'
        },
        {
          action: 'Size: BOOM'
        },
        {
          action: '2oo2? Need the logic document'
        },
        {
          action: 'Price: Very very expensive'
        }
      ]
   }
}
</script>