Vuejs 组件道具作为字符串

Question

我想将此道具作为字符串传递：

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

但我认为 Vue 认为我正在尝试调用一个方法，因为我收到了以下警告：

[Vue 警告]：属性或方法“图片”未在实例上定义，但在渲染期间被引用。确保在 data 选项中声明反应数据属性。

[Vue 警告]：无效的道具：道具“头像”的类型检查失败。预期的字符串，未定义。

如何将 "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>

原文由 Banning Stuckey 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

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

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

---

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

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

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

原文由 thanksd 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

如果你真的想传递静态字符串，你可以直接传递字符串而不用 v-bind

 <div id="app">
   <greeting text="world"></greeting>
</div>

然后在 JS 文件中

Vue.component('greeting', {
    props: ['text'],
  template: '<h1>Hello {{ text  }}!</h1>'
});

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

JSFiddle => https://jsfiddle.net/dpLp4jk8/

原文由 k.ronnakrit 发布，翻译遵循 CC BY-SA 3.0 许可协议