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个回答

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

lyaiyuqi
lyaiyuqi 数据都拿到了,就是放在选中casecont1的时候caseconts2="[object Object],[object Object],[object Object],[object Object]就会显示在标签上
大约一年之前 回复
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问