使用vue.js动态组件实现tab切换,发现子组件绑定的props在切换后并不能立即展现在子组件中,需要来回切换两次才能出现在子组件中,不知道是不是不该这么用。
动态组件如果需要获取实例或者父组件的data,那么势必将动态props绑定到自定义标签上,这里使用了保留的component,将属性绑定到了上面,但是这样会导致在没有定义该属性的currentView上面出现
items="[objectObject],[object Object],[object Object]"
是不是不该这么用?
<div id="app">
<a href="javascript:" @click="this.currentView = 'sss'">sss</a>
<a href="javascript:" @click="this.currentView = 'rrr'">rrr</a>
<component :is="currentView" :items="items" keep-alive></component>
</div>
var sss = Vue.component('sss', {
template: '<p>232232</p>'
});
var rrr = Vue.component('rrr', {
template: '<div><ul><li v-for="item in items">{{item.img}} {{item.price}}</li></ul></div>',
props:['items'],
activate: function () {
console.log(this.items);
}
});
var vm = new Vue({
el: "#app",
data: {
currentView: 'sss',
items: []
},
created: function () {
var self = this;
$.get(someApi, function (data) {
if (data.code === 200) {
self.items = data.data.list;
} else {
alert('error!');
}
}, 'json');
},
components: {
sss: sss,
rrr: rrr
}
});
已经在gitter上解决了,请求放到子组件上,另外在activate钩子下面需要调用done()才能同步数据,这个的确很容易让人忽略。
Vue.component('activate-example', {
activate: function (done) {
var self = this
loadDataAsync(function (data) {
self.someData = data
done()
})
}
})
第二个问题,既然 sss 组件不需要items,那就把获取 items 的逻辑写到 rrr 里面好了。如果还有别的组件依赖这笔数据,或许可以在 sss 组件里设置这个 props, 但是不用它。