如何在Vue2中将数据从父级传递给子级

Question

所以我有4个组件如下

卡片组件

Vue.component('card-list',{

    template:`<div >
                    <card v-for="task in tasks" >{{task.month}}</card>
              </div>`,

    data(){

      return {

          tasks:[

              {description:'Get up from Bed',completed:true,month:12},
              {description:'Brush your teeth',completed:false,month:24},
              {description:'GO to POOP ',completed:false,month:36},
              {description:'Eat BreakFast',completed:true,month:12},
        ]

      }

    }
});

卡组件

Vue.component('card',{

    template:`
                <div class="col-lg-2 col-md-3 col-sm-4 col-xs-12 bx_main">
                  <div class="flip3D col-md-12 pad">
                    <back><slot></slot></back>
                    <front><slot></slot></front>
                  </div>
                </div>`,

});

前组件

Vue.component('front',{

    props: ['months'],
    template:`
                <div class="front"><span class="fav_main2"><span><i class="">{{months}}</i></span></span>
                  <div class="col-md-12 star_mn">
                    <div class="ico_main"><a href="#"><i class="fa fa-star"></i></a></div>
                    <div class="clearfix"></div>
                  </div>
              </div>`,

});

返回组件

Vue.component('back',{

    props: ['months','rates'],

    template:`
                    <div class="back">
                    <span class="fav_main2"><span><i class="">{{months}}</i></span></span>
                    <div class="col-md-12 star_mn">
                      <div class="ico_main"><a href="#"><i class="fa fa-star"></i></a></div>
                      <div class="clearfix"></div>
                    </div>
                     <div class="back_main_cont">
                        <div class="col-md-12 back_tbl_main">
                          <div class="back_tbl">
                            Table goes here
                          </div>
                        </div>
                        <div class="col-md-12">
                          <div class="col-md-9 col-sm-9 col-xs-9 pad">
                            <div class="input-group bootstrap-touchspin">
                              <input class="commission form-control"
                              type="text" data-cardpos="0" value="0" style="display: block;"></div>
                          </div>
                          <div class="col-md-3 col-sm-3 col-xs-3 pad">
                            <button class="btn btn-primary btn-sm pull-right view_btn1" data-cardpos="0" type="button"><i class="fa fa-eye"></i></button>
                          </div>
                          <div class="clearfix"></div>
                        </div>
                      </div>
                    </div>
                  `,

});

我想将task.month值传递给子组件

我该怎么做？

UPDATE1

尝试了这个

Vue.component('card-list',{

        template:`<div >
                        <card v-for="task in tasks" :months="task.months" ></card>
                  </div>`,

        data(){

          return {

              tasks:[

                  {description:'Get up from Bed',completed:true,month:12},
                  {description:'Brush your teeth',completed:false,month:24},
                  {description:'GO to POOP ',completed:false,month:36},
                  {description:'Eat BreakFast',completed:true,month:12},
            ]

          }

        }
    });

错误

  

[Vue警告]：编译模板时出错：

                                                   

  
• 表达式无效:: months =“{{task.months}}”
  

     

在

中找到      

---＆GT;          

Answer 1

您需要在card中声明道具，然后在HTML标记中传递道具。

Vue.component('card-list', {

  template: `<div >
                    <card v-for="task in tasks" :key="task" :months="task.month">{{task.month}}</card>
              </div>`,

  data() {

    return {

      tasks: [

        {
          description: 'Get up from Bed',
          completed: true,
          month: 12
        },
        {
          description: 'Brush your teeth',
          completed: false,
          month: 24
        },
        {
          description: 'GO to POOP ',
          completed: false,
          month: 36
        },
        {
          description: 'Eat BreakFast',
          completed: true,
          month: 12
        },
      ]

    }

  }
});

Vue.component('card', {

  template: `
                <div class="col-lg-2 col-md-3 col-sm-4 col-xs-12 bx_main">
                  <div class="flip3D col-md-12 pad">
                    <back :months="months"><slot></slot></back>
                    <front :months="months"><slot></slot></front>
                  </div>
                </div>`,
  props: ['months']

});

Vue.component('front', {

  props: ['months'],
  template: `
                <div class="front"><span class="fav_main2"><span><i class="">{{months}}</i></span></span>
                  <div class="col-md-12 star_mn">
                    <div class="ico_main"><a href="#"><i class="fa fa-star"></i></a></div>
                    <div class="clearfix"></div>
                  </div>
              </div>`,

});

Vue.component('back', {

  props: ['months', 'rates'],

  template: `
                    <div class="back">
                    <span class="fav_main2"><span><i class="">{{months}}</i></span></span>
                    <div class="col-md-12 star_mn">
                      <div class="ico_main"><a href="#"><i class="fa fa-star"></i></a></div>
                      <div class="clearfix"></div>
                    </div>
                     <div class="back_main_cont">
                        <div class="col-md-12 back_tbl_main">
                          <div class="back_tbl">
                            Table goes here
                          </div>
                        </div>
                        <div class="col-md-12">
                          <div class="col-md-9 col-sm-9 col-xs-9 pad">
                            <div class="input-group bootstrap-touchspin">
                              <input class="commission form-control"
                              type="text" data-cardpos="0" value="0" style="display: block;"></div>
                          </div>
                          <div class="col-md-3 col-sm-3 col-xs-3 pad">
                            <button class="btn btn-primary btn-sm pull-right view_btn1" data-cardpos="0" type="button"><i class="fa fa-eye"></i></button>
                          </div>
                          <div class="clearfix"></div>
                        </div>
                      </div>
                    </div>
                  `,

});

new Vue({
  el: '#app'
});

<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.3.3/vue.min.js"></script>
<card-list id="app">

</card-list>