vue.js - Vuejs 组件 Prop 作为字符串

Question

我想将此 Prop 作为字符串传递:

<list-view :avatar="pictures"></list-view>

但我认为 Vue 认为我正在尝试调用一个方法，因为我收到了这些警告:

[Vue warn]: Property or method "pictures" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option.

[Vue warn]: Invalid prop: type check failed for prop "avatar". Expected String, got Undefined.

如何通过"pictures"作为字符串？

Vue.component('list-view', {
  props: {
    avatar: { type: String, required: true },
  },
  template: `<div>{{ avatar }}</div>`,
});

var app = new Vue({ el: '#app' });

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <list-view :avatar="pictures" ></list-view>
</div>

Answer 1

现在，Vue 正试图找到一个名为 pictures 的变量。作为属性值传递给子组件。

如果要在该内联表达式中指定字符串值，可以将该值括在引号中以使其成为字符串:

<list-view :avatar="'pictures'"></list-view>

或者，正如@Zunnii 在下面回答的那样，如果传递的值真的只是一个静态字符串，您可以简单地省略 v-bind冒号简写:

<list-view avatar="pictures"></list-view>

这样，avatar子组件的 prop 将被分配字符串值 "pictures" .