我在chrome开发工具中看到“缺少必需的道具”错误。我一直在遵循说明和类似情况,但是仍然无法预知道具不会动,因此我开始认为这是一个概念性问题。
我有一个像这样的组件
<template>
<div class="external">
<div @click="sendMyProps" class="internal">
...
</div>
</div>
</template>
成为脚本标记中的sendMyProps方法并导出默认值,例如:
methods: {
sendMyProps () {
this.$router.push({ name: 'destiny', params: { menu: 'destiny' }})
},
将其存储在其中的主要成分(可能无关紧要)是:
<template>
<div>
<External></External>
<AnotherOne></AnotherOne>
<AnotherTwo></AnotherTwo>
</div>
</template>
<script>
import External from '@/components/External'
import AnotherOne from '@/components/AnotherOne'
import AnotherTwo from '@/components/AnotherTwo'
export default {
name: 'Main',
components: {
External ,
AnotherOne,
AnotherTwo,
}
}
</script>
在我的路线中,所有信息均已导入:
{
path: '/destiny',
name: 'destiny',
components: {
default: Destiny,
header: Header,
footer: Footer
},
props: true
}
最后,目标组件看起来非常大:
<template>
<div class="finalComponent">
<span @click="active = 'destiny'" :class="{ active: active ==='destiny' }">destiny</span>
<span @click="active = 'blabla'" :class="{ active: active ==='blabla' }">ASpan</span>
...
</template>
<script>
import { mapGetters, mapActions } from 'vuex'
...
export default {
created () {
this.aMethod()
},
mounted () {
this.active = this.$props.menu
},
...
props: {
menu: {
type: String,
required: true,
default: 'house'
}
}
}
</script>
我相信我已经拥有一切,但是我需要的变量没有被加载。根据chrome dev工具,它甚至没有从路由器发送到组件。周围迷人的灵魂可以使我摆脱这种困扰吗?谢谢