Vuejs 组件道具作为字符串
Posted
技术标签:
【中文标题】Vuejs 组件道具作为字符串【英文标题】:Vuejs component props as string 【发布时间】: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>
【问题讨论】:
【参考方案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>
【讨论】:
以上是关于Vuejs 组件道具作为字符串的主要内容,如果未能解决你的问题,请参考以下文章