Vuejs 组件道具作为字符串答案

【问题标题】：Vuejs component props as stringVuejs 组件道具作为字符串
【发布时间】：2017-12-23 20:06:36
【问题描述】：

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

<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>

【问题讨论】：

标签： vue.js vuejs2

【解决方案1】：

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

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

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

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

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

这样子组件的avatar prop会被赋值为字符串值"pictures"。

【讨论】：

【解决方案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/

【讨论】：

【解决方案3】：

在 laravel 中我们可以传递如下所示的字符串

function authUserCurrency(){
    return '$';
}
<service :authusercurrency="'{!!authUserCurrency()!!}'"></services>

Vue.js 模板

props:{authusercurrency:String},

或

 props:['authUserCurrency'],

【讨论】：

【解决方案4】：

:avatar="pictures"  //vue treat pictures as a variable or computed properties

默认情况下 vue 将图片视为变量或计算属性，并且 vue 在本地搜索，不会找到并抛出错误。所以你要做的就是在外部告诉 vue 它是一个字符串而不是变量或计算属性。所以用引号括起来。

:avatar="'pictures'" // I guess it will work

【讨论】：

【解决方案5】：

在我的情况下，我需要将静态字符串与动态属性值一起传递。如下所示。

<home-card :title="'By' + post.author.name "></home-card>

【讨论】：