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

Question

正如我从 vue.js 指南中了解到的那样

you can use v-bind without an argument (v-bind instead of 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

首先，如果您尝试将对象 "names" 从根组件传递给子组件 click-count，则数据必须位于 "root":

中

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

现在，您使用不带参数的 v-bind 所做的是将对象 "names" 传递给组件，但没有命名的 "names" 参数：

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

与

相同

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

最后，您使用 v-bind（带或不带参数）传递给组件的是道具，如果您想在模板中使用它们，则需要声明它们。
但是在您的情况下， 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>

编辑：解释您链接的图片

如其所说 "If you want to pass all the properties of an object as props" 表示没有参数 (<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 传递时，它在一个唯一的命名参数（而不是它的属性）下：

props : ['post']

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

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

Passing the Properties of an Object in Vue.js

vue.js

vue-directives