javascript - 如何在Vuejs中将道具从父母传递给孩子
问题描述
我有一个名为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上的单选按钮中选择的电压值
解决方案
组件的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>
推荐阅读
- javascript - 切换隐藏/显示双击问题
- c - 即使 struct termios c_cc[VMIN]=1,两个线程和终端也不会阻塞
- client - RDP 会话可以看到有关主机的哪些信息
- apache-spark - 在 SparkR 中计算 groupBy 内的中位数
- java - 使用 Mockito.doNothing() 进行事务注释
- reactjs - 我的 localhost.5000 和内部服务器有什么问题?
- linkedin-api - 获取Linkedin公司页面帖子(ugcPosts)
- apexcharts - 组合图表顶点图表中的自定义位置
- javascript - 在 React 中使用 useContext 和 useReducer 创建新的键值对
- flutter - Flutter 从 firebase_admob 切换到 google_mobile_ads