Vuejs 组件道具作为字符串 [英] Vuejs component props as string

问题描述

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

I want to pass this prop as a string:

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

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

But I think Vue thinks I am trying to call a method because I am getting these warnings:

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

[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 警告]:无效的道具:道具头像"的类型检查失败.预期字符串，未定义.

如何将 "pictures" 作为字符串传递?

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

推荐答案

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

Right now, Vue is trying to find a variable named pictures to pass as the property value to the child component.

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

If you want to specify a string value in that inline expression, you can wrap the value in quotes to make it a string:

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

<小时>

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

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

这样子组件的avatar属性就会被赋值为"pictures".

This way, the avatar prop of the child component will be assigned the string value "pictures".

这篇关于Vuejs 组件道具作为字符串的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！