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

【问题标题】：How to pass data from parent to child in Vue2如何在Vue2中将数据从父级传递给子级
【发布时间】：2017-11-07 11:25:33
【问题描述】：

所以我有以下 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 值传递给子组件

我该怎么做？

更新1

试过了

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

发现于

--->

【问题讨论】：

您的意思是要将其从card-list 传递给card？
@RoyJ umm 数据必须显示在 front componenet 和 back 组件实际上是 card componenet 的一部分
@RoyJ 我试着写成这样<card v-for="task in tasks" months="{{task.months}}"></card> 但有一个错误
试试:months="task.months"
@RoyJ no 不起作用，我做错了吗？ , Vue 是否允许向 grandChildren 传递数据？

标签： vue.js vuejs2

【解决方案1】：

需要在card中声明prop，然后在HTML标签中传递prop。

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>

【讨论】：