javascript - v-slot 在 VueJS 中始终未定义
问题描述
这是问题所在。根视图:
<template>
<div class="home">
<Grid :rows=3 :cols=4>
<GridItem :x=1 :y=1 />
<GridItem :x=2 :y=1 />
</Grid>
</div>
</template>
<script>
import Grid from '@/components/Grid'
import GridItem from '@/components/GridItem'
export default {
name: 'Home',
components: {
Grid,
GridItem
}
}
</script>
网格组件(容器):
<template>
<div class="grid">
<slot v-bind="testData"></slot>
</div>
</template>
<script>
export default {
name: 'Grid',
data() {
return {
testData: 'test'
}
},
props: {
rows: Number,
cols: Number
}
}
</script>
最后是网格项组件:
<template v-slot="slotProps">
<div class="grid-item">
{{x}} {{y}} {{slotProps.testData}}
</div>
</template>
<script>
export default {
name: 'GridItem',
props: {
x: Number,
y: Number
}
}
</script>
我收到错误:GridItem.vue Uncaught (in promise) TypeError: Cannot read property 'testData' of undefined。我想知道出了什么问题。需要帮助,感谢您的时间。
解决方案
在组件中获取您的插槽道具Home
:
<template>
<div class="home">
<Grid :rows=3 :cols=4 v-slot="{ testData }">
<GridItem :x=1 :y=1 :test-data="testData" />
<GridItem :x=2 :y=1 :test-data="testData" />
</Grid>
</div>
</template>
推荐阅读
- php-5.6 - 具有未知长度的数组的偏移量
- mysql - sql插入时如何抑制唯一键检查
- javascript - 如何将Javascript变量传递给PHP函数
- git - 使用 gerrit/git 命令行检测 gerrit 补丁是否需要变基?
- javascript - 如何测试一个点是否在 SVG 封闭路径内
- php - 如何插入两个表的 ID(多对多关系)
- angular - “ngbd-modal-component”不是已知元素
- hibernate - Hibernate Search - recreate index if existing data was not indexed before
- excel - VBA中两个日期之间的间隔
- java - 在 Hyperledger Fabric 上创建通道时,由于超时发送事务失败