如何在Vuejs中将道具从父母传递给孩子

Question

我有一个名为 Stepper 的父组件，其中包含名为 ShortSummary 的子组件。我正在尝试通过单击单选按钮将道具从 Stepper 传递到 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} 显示从 Stepper

上的单选按钮中选择的电压值

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>