在Vue.js中传递对象的属性
在Vue.js中传递对象的属性
提问于 2018-06-03 02:47:40
正如我从vue.js指南中学到的
你可以使用不带参数的v-
(v-bind而不是v-bind:prop-name)。
我试过了，我没有得到任何价值。
Vue.component('click-count',{
data: function(){
return{
names: {
firstName: 'kuldeep',
lastName: 'Babbar'
}
}
},
template: `
<div class="blog-post">
<p>{{names.firstName}}</p>
</div>
`
})
var app = new Vue({
el: '#root'
});<div id="root">
<div >
<click-count v-bind="names"></click-count>
</div>
</div>
**新增:忘记添加此镜像**
有人能解释这一点吗？
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-06-03 03:56:26
首先，如果您尝试将对象“名称”从根传递到子click-count组件，则数据必须位于“根”中：
var app = new Vue({
el: '#root',
data(){
return{
names: {
firstName: 'kuldeep',
lastName: 'Babbar'
}
}
})现在，不带参数的v-bind的用法是将对象“名称”传递给组件，但不带命名的“名称”参数：
<click-count v-bind="names"></click-count>等同于
<click-count v-bind="{ firstName: 'kuldeep', lastName: 'Babbar' }"></click-count> 最后，使用v-bind (带参数或不带参数)传递给组件的是props，如果您想在模板中使用它们，则需要声明它们。
但在您的示例中，click-count组件不知道names是什么意思：
Vue.component('click-count',{
props:['firstName', 'lastName'],
template: `
<div class="blog-post">
<p>{{ firstName }}</p>
</div>
`
})
var app = new Vue({
el: '#root',
data(){
return{
names: {
firstName: 'kuldeep',
lastName: 'Babbar'
}
}
}
})<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.min.js"></script>
<div id="root">
<div >
<click-count v-bind="names"></click-count>
</div>
</div>
编辑:解释您链接的图像
正如它所说的“如果你想将一个对象的所有属性作为属性传递”意味着没有参数(<blog-post v-bind="post"></blog-post>)，"BlogPost“组件的属性就是post的所有属性：
props : ['id', 'title']像这样在组件模板中使用：<p>Title: {{ title }}</p>
VS当"post“对象作为带有参数(<blog-post v-bind:post="post"></blog-post>)的属性传递时，它位于唯一的命名参数下(而不是它的属性)：
props : ['post']像这样在组件模板中使用：<p>Title: {{ post.title }}</p>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50660098
复制相关文章
相似问题