Vuejs组件道具为字符串

Question

我想把这个道具作为一个字符串传递:

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

但我认为Vue认为我试图调用一种方法,因为我收到了这些警告:

[Vue警告]:属性或方法"图片"未在实例上定义,但在渲染期间引用.确保在数据选项中声明反应数据属性.

[Vue警告]:无效道具:对于道具"头像",类型检查失败.预期字符串,未定义.

我怎么能"pictures"作为一个字符串传递？

Answer 1

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

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

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

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

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

这样,avatar子组件的prop将被赋予字符串值"pictures".

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'
});