blocks|key|2621925|text|首先，如果您尝试将对象“名称”从根传递到子click-count组件，则数据必须位于“根”中：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|2621926|var+app+=+new+Vue({
++el:+'#root',
++data(){
++++return{
++++++names:+{
++++++++firstName:+'kuldeep',
++++++++lastName:+'Babbar'
++++++}
++++}
})|code-block|syntax|javascript|2621927|现在，不带参数的v-bind的用法是将对象“名称”传递给组件，但不带命名的“名称”参数：|2621928|<click-count+v-bind="names"></click-count>|2621929|等同于|2621930|<click-count+v-bind="{+firstName:+'kuldeep',+lastName:+'Babbar'+}"></click-count>+|2621931|最后，使用v-bind+(带参数或不带参数)传递给组件的是props，如果您想在模板中使用它们，则需要声明它们。|2621932|但在您的示例中，click-count组件不知道names是什么意思：|2621933|​|2621934|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'
++++++}
++++}
++}
})|2621935|<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>|2621936|2621937|2621938|编辑:解释您链接的图像|BOLD|2621939|正如它所说的“如果你想将一个对象的所有属性作为属性传递”意味着没有参数(<blog-post+v-bind="post"></blog-post>)，"BlogPost“组件的属性就是post的所有属性：|2621940|props+:+['id',+'title']|2621941|像这样在组件模板中使用：<p>Title:+{{+title+}}</p>|2621942|VS当"post“对象作为带有参数(<blog-post+v-bind:post="post"></blog-post>)的属性传递时，它位于唯一的命名参数下(而不是它的属性)：|2621943|props+:+['post']|2621944|像这样在组件模板中使用：<p>Title:+{{+post.title+}}</p>|2621945|entityMap^0|L|B|0|0|0|0|0|0|0|8|B|O|5|0|0|0|0|0|0|0|9|0|10|11|0|0|C|P|0|I|16|0|0|C|U|0^^$0|@$1|2|3|4|5|6|7|1L|8|@$9|1M|A|1N|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|1O|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|1P|8|@]|D|@]|E|$]]|$1|M|3|N|5|H|7|1Q|8|@]|D|@]|E|$I|J]]|$1|O|3|P|5|6|7|1R|8|@]|D|@]|E|$]]|$1|Q|3|R|5|H|7|1S|8|@]|D|@]|E|$I|J]]|$1|S|3|T|5|6|7|1T|8|@]|D|@]|E|$]]|$1|U|3|V|5|6|7|1U|8|@$9|1V|A|1W|B|C]|$9|1X|A|1Y|B|C]]|D|@]|E|$]]|$1|W|3|X|5|6|7|1Z|8|@]|D|@]|E|$]]|$1|Y|3|Z|5|H|7|20|8|@]|D|@]|E|$I|J]]|$1|10|3|11|5|H|7|21|8|@]|D|@]|E|$I|J]]|$1|12|3|X|5|6|7|22|8|@]|D|@]|E|$]]|$1|13|3|-4|5|6|7|23|8|@]|D|@]|E|$]]|$1|14|3|15|5|6|7|24|8|@$9|25|A|26|B|16]]|D|@]|E|$]]|$1|17|3|18|5|6|7|27|8|@$9|28|A|29|B|C]]|D|@]|E|$]]|$1|19|3|1A|5|H|7|2A|8|@]|D|@]|E|$I|J]]|$1|1B|3|1C|5|6|7|2B|8|@$9|2C|A|2D|B|C]]|D|@]|E|$]]|$1|1D|3|1E|5|6|7|2E|8|@$9|2F|A|2G|B|C]]|D|@]|E|$]]|$1|1F|3|1G|5|H|7|2H|8|@]|D|@]|E|$I|J]]|$1|1H|3|1I|5|6|7|2I|8|@$9|2J|A|2K|B|C]]|D|@]|E|$]]|$1|1J|3|-4|5|6|7|2L|8|@]|D|@]|E|$]]]|1K|$]]

<p>First, if you try to pass an object "names" from root to child <code>click-count</code> component, the data has to be inside the "root":</p>

<pre class="lang-js prettyprint-override"><code>var app = new Vue({
  el: '#root',
  data(){
    return{
      names: {
        firstName: 'kuldeep',
        lastName: 'Babbar'
      }
    }
})
</code></pre>

<p>Now, what you do with v-bind without argument is to pass the object "names" to the component but without a named "names" argument:</p>

<pre><code>&lt;click-count v-bind="names"&gt;&lt;/click-count&gt;
</code></pre>

<p>is the same as</p>

<pre><code>&lt;click-count v-bind="{ firstName: 'kuldeep', lastName: 'Babbar' }"&gt;&lt;/click-count&gt; 
</code></pre>

<p>Finally what you pass to your component with v-bind (with or without argument) is props and you need to declare them if you want to use them in your template.<br>
But in your case, the <code>click-count</code> component doesn't know what <code>names</code> means:</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>Vue.component('click-count',{
  props:['firstName', 'lastName'],
  template: `
    &lt;div class="blog-post"&gt;
    &lt;p&gt;{{ firstName }}&lt;/p&gt;
    &lt;/div&gt;
  `
})
var app = new Vue({
  el: '#root',
  data(){
    return{
      names: {
        firstName: 'kuldeep',
        lastName: 'Babbar'
      }
    }
  }
})</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.min.js"&gt;&lt;/script&gt;
&lt;div id="root"&gt;
  &lt;div &gt;
    &lt;click-count v-bind="names"&gt;&lt;/click-count&gt;
  &lt;/div&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>

<hr>

<p><strong>Edit: To explain the image you linked</strong>  </p>

<p>As it says <em>"If you want to pass all the properties of an object as props"</em> means that without argument (<code>&lt;blog-post v-bind="post"&gt;&lt;/blog-post&gt;</code>), props for the "BlogPost" component are <strong>all the properties</strong> of post:</p>

<pre><code>props : ['id', 'title']
</code></pre>

<p>used in the component template like that: <code>&lt;p&gt;Title: {{ title }}&lt;/p&gt;</code></p>

<p>VS when the "post" object is passed as props with an argument (<code>&lt;blog-post v-bind:post="post"&gt;&lt;/blog-post&gt;</code>), it's under a unique named argument (and not its properties):</p>

<pre><code>props : ['post']
</code></pre>

<p>used in the component template like that: <code>&lt;p&gt;Title: {{ post.title }}&lt;/p&gt;</code></p>


<p>As i learnt from vue.js guide</p>

<blockquote>
  <p>you can use v-bind without an argument (v-bind instead of v-bind:prop-name).</p>
</blockquote>

<p>I treid it, i'm not getting any value.</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>Vue.component('click-count',{
  data: function(){
    return{
      names: {
        firstName: 'kuldeep',
        lastName: 'Babbar'
      }
    }
  },
  template: `
    &lt;div class="blog-post"&gt;
      &lt;p&gt;{{names.firstName}}&lt;/p&gt;
    &lt;/div&gt;
  `
})
var app = new Vue({
  el: '#root'
});</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="root"&gt;
  &lt;div &gt;
    &lt;click-count v-bind="names"&gt;&lt;/click-count&gt;
  &lt;/div&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>

<p>** New: Forgot to add this image**</p>

<p><a href="https://i.stack.imgur.com/YlDMD.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/YlDMD.png" alt="enter image description here"></a></p>

<p>can any one explain this?</p>


Passing the Properties of an Object in Vue.js

正如我从vue.js指南中学到的你可以使用不带参数的v-  (v-bind而不是v-bind:prop-name)。我试过了，我没有得到任何价值。​Vue.component('click-count',{  data: function(){    return{      names: {        first...

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

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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