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 求差集那个函数有问题,有无佬可以解决
  • ¥15 MATLAB动图问题
  • ¥15 【提问】基于Invest的水源涵养
  • ¥20 微信网友居然可以通过vx号找到我绑的手机号
  • ¥15 寻一个支付宝扫码远程授权登录的软件助手app
  • ¥15 解riccati方程组
  • ¥15 display:none;样式在嵌套结构中的已设置了display样式的元素上不起作用?
  • ¥15 使用rabbitMQ 消息队列作为url源进行多线程爬取时,总有几个url没有处理的问题。
  • ¥15 Ubuntu在安装序列比对软件STAR时出现报错如何解决
  • ¥50 树莓派安卓APK系统签名