lyaiyuqi 2019-06-14 12:05 采纳率: 0%
浏览 1318

vue的<component>怎么动态获取绑定的多个组件的props的值

vue的怎么动态获取绑定的多个组件的props的值?这是一个tab切换的demo,三个切换按钮,点击切换对应的组件显示。新手一枚,这么写在选中组件1没选中的另外两个组件的情况下总显示caseconts2="[object Object],[object Object],[object Object],[object Object]"和caseconts2="[object Object],[object Object],[object Object],[object Object]"

<div class="casetabs">
   <ul class="clearfloat">
      <li @click="toggleTabs(index,tab.view)" v-for="(tab,index) in casetabs"  :class="{case_on:case_on==index}">{{ tab.type }}</li>
      </ul>
</div>

<component :is="currentView" :caseconts1="caseconts1" :caseconts2="caseconts2" :caseconts3="caseconts3"></component>
Vue.component("case1", {
  template: `#casecont`,
  props: ['caseconts1'],
  data() {
    return {
      },
    }
  }
})
Vue.component("case3", {
  template: `#casecont`,
  props: ['caseconts1'],
  data() {
    return {
      },
    }
  }
})
Vue.component("case2", {
  template: `#casecont`,
  props: ['caseconts1'],
  data() {
    return {
      },
    }
  }
})

caseconts1,caseconts2,casecont3是json获取的

var app = new Vue({
            el: '#dre',
            data: {
                casetabs: [
                    { type: '最新案例', view: 'case1' },
                    { type: '热门案例', view: 'case2' },
                    { type: '经典案例', view: 'case3' }
                ],
                caseconts1:[],
                caseconts2:[],
                caseconts3:[],
            },
                        mounted: function () {
                this.$nextTick(function () {
                    app.cartView();
                })
            },
            methods: {
                cartView: function () {
                    var _this = this;
                    this.$http.get("data/index.json", { "id": 123 }).then(function (response) {
                        _this.caseconts1 = response.data.result.caseconts1;
                        _this.caseconts2 = response.data.result.caseconts2;
                        _this.caseconts3 = response.data.result.caseconts3;
                    });

图片说明

  • 写回答

1条回答 默认 最新

  • xiaozhuge_S 2019-06-14 17:17
    关注

    可以先打印一下数据看看拿没拿到

    评论

报告相同问题?

悬赏问题

  • ¥15 用前端向数据库插入数据,通过debug发现数据能走到后端,但是放行之后就会提示错误
  • ¥15 python天天向上类似问题,但没有清零
  • ¥30 3天&7天&&15天&销量如何统计同一行
  • ¥30 帮我写一段可以读取LD2450数据并计算距离的Arduino代码
  • ¥15 C#调用python代码(python带有库)
  • ¥15 矩阵加法的规则是两个矩阵中对应位置的数的绝对值进行加和
  • ¥15 活动选择题。最多可以参加几个项目?
  • ¥15 飞机曲面部件如机翼,壁板等具体的孔位模型
  • ¥15 vs2019中数据导出问题
  • ¥20 云服务Linux系统TCP-MSS值修改?