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;
});