0

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

您可以使用不带参数的 v-bind(v-bind 代替 v-bind:prop-name)。

我treid它,我没有得到任何价值。

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>

** 新:忘记添加此图片**

在此处输入图像描述

谁能解释一下?

4

1 回答 1

4

首先,如果您尝试将对象“名称”从根传递到子click-count组件,则数据必须位于“根”内:

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(带或不带参数)传递给组件的是 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”组件的道具是帖子的所有属性

props : ['id', 'title']

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

VS 当“post”对象作为带有参数(<blog-post v-bind:post="post"></blog-post>)的道具传递时,它位于一个唯一的命名参数(而不是它的属性)下:

props : ['post']

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

于 2018-06-02T19:56:26.453 回答