属性 或方法 "item" 未在实例上定义但在渲染期间被引用

Question

应用程序在控制台中向我抛出一个错误。
属性 或方法“徽标”未在实例上定义，但在渲染期间被引用。通过初始化 属性

确保此 属性 是反应性的，无论是在数据选项中还是对于基于 class 的组件

这就是 HTML 和脚本的样子。

<template id="items-template">
    <span class="items">
        <img v-if="logo.name" src="/images/name.png"/>
    </span>
</template>

@section scripts {
    <script type="text/javascript">
        Vue.component('items', {
            props: ['logo'],
            template: '#items-template'
        });
    </script>
}

Answer 1

这是它应该如何工作的示例：

<div id="app">
  <items :logo="logo"></items>
</div>

<script type="text/x-template" id="items-template">
    <div>
      <span class="items">
        <img v-if="logo.name" src="https://thumbs-prod.si-cdn.com/d4e3zqOM5KUq8m0m-AFVxuqa5ZM=/800x600/filters:no_upscale():focal(554x699:555x700)/https://public-media.si-cdn.com/filer/a4/04/a404c799-7118-459a-8de4-89e4a44b124f/img_1317.jpg"/>
      </span>
    </div>
</script>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var itemComponent = {
    template: "#items-template",
    props: {
    logo: Object
  } 
}

new Vue({
    el: "#app",
    data: {
      logo: {
        name: 'someName'
      }
    },
    components: {
      'items': itemComponent
    }
})
</script>

在此示例中，div#app 是父级，它将徽标传递给 items-component 徽标属性。