Question

我有一个组件

在我拥有的组件中

export default {
  name: "Modal",
  props: ['showFooter'],
}

然后在我拥有的模板中

<template>
   <div class='modal'>
       <div class='footer' v-if='showFooter'>This is the footer</div>
   </div>
</template>

无论我是否通过道具，页脚都不会显示。只是说

[Vue warn]: Property or method "showFooter" is not defined on the instance but referenced during render.

这里有什么问题？

我也刚刚尝试过

<template>
   <div class='modal'>
       <div class='footer' v-if='showFoot'>This is the footer</div>
   </div>
</template>    

export default {
  name: "Modal",
  props: ['showFooter'],
  data(){
    return {
       showFoot:this.showFooter
    }
  }
}

然后我被告知showFoot未定义。哪怕更奇怪，因为我在数据中在那里定义了它！??

即使我只是完全删除该属性，并在数据中对其进行定义

export default {
  name: "Modal",
  data(){
    return {
       showFoot:true
    }
  }
}

我仍然得到

[Vue warn]: Property or method "showFoot" is not defined on the instance but referenced during render.

太奇怪了，我终生无法解决

几乎就像模板无法访问我在componenet的data（）或props中定义的任何内容。从未见过

Answer 1

我认为您不会从父级组件传递道具。理想情况下，您可以从父组件传递它并将其接收到Children中。

<childComponent :yourPropNameInChild="anyDataFromParentYouWantToPass" />

此子组件在您的父组件中呈现。

要让孩子接受它，您可以

export default { name: "Modal", props: ['yourPropNameInChild'], }

截至您的示例

<modal :showFooter="showFooter" />

在您的父母中，您必须编写以上代码行

在您的孩子中，您必须照做

在您的示例中，您还缺少script标签

Vue道具未正确通过

1 个答案: