在Vue.js中传递对象的属性

Question

我从vue.js指南中了解到

  

你可以使用没有参数的v-bind（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>

**新增：忘记添加此图片**

可以解释一下吗？

Answer 1

首先，如果你试图传递一个对象＆＃34;名称＆＃34;从root到子click-count组件，数据必须位于＆＃34; root＆＃34;：

var app = new Vue({
  el: '#root',
  data(){
    return{
      names: {
        firstName: 'kuldeep',
        lastName: 'Babbar'
      }
    }
})

现在，你在没有参数的情况下使用v-bind做的是传递对象＆＃34; names＆＃34;到组件但没有命名＆＃34;名称＆＃34;参数：

<click-count v-bind="names"></click-count>

与

相同

<click-count v-bind="{ firstName: 'kuldeep', lastName: 'Babbar' }"></click-count> 

最后，使用v-bind（带或不带参数）传递给组件的是道具，如果要在模板中使用它们，则需要声明它们。
但在您的情况下，click-count组件并不知道names的含义：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

编辑：解释您关联的图片

正如它所说的＆＃34;如果你想将对象的所有属性作为道具传递＆＃34; 意味着没有参数（<blog-post v-bind="post"></blog-post>），那么＆＃的道具34;博文＆＃34;组件 的所有属性：

props : ['id', 'title']

在组件模板中使用，如：<p>Title: {{ title }}</p>

VS＆＃34; post＆＃34; object作为带有参数（<blog-post v-bind:post="post"></blog-post>）的props传递，它在一个唯一的命名参数（而不是它的属性）下：

props : ['post']

在组件模板中使用，如：<p>Title: {{ post.title }}</p>