传递Vue.js中对象的属性

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (1)
  • 关注 (0)
  • 查看 (139)

我从vue.js指南中学到的东西

可以在没有参数的情况下使用v-BIND(v-BIND而不是v-BIND:支柱-名称)。

我害怕了,我没有得到任何价值。

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>

提问于
用户回答回答于

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

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

现在,使用不带参数的v-绑定的方法是将对象“名称”传递给组件,但不使用命名的“名称”参数:

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

扫码关注云+社区

领取腾讯云代金券

年度创作总结 领取年终奖励