Передача свойств объекта в Vue.js - PullRequest
Новая
       33

Передача свойств объекта в Vue.js

0 голосов
/ 02 июня 2018

Как я узнал из руководства 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>

** Новое: Забыли добавить это изображение **

enter image description here

Кто-нибудь может это объяснить?

1 Ответ

0 голосов
/ 02 июня 2018

Во-первых, если вы попытаетесь передать объекту «имена» от корневого до дочернего 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 (с аргументом или без аргумента) является реквизитом, и вам нужно объявить их, если вы хотите использовать их в своем шаблоне.
Но в вашем случае компонент 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>

...