使用is可以切换组件
我们可以使用is来动态的切换组件:
<component v-bind:is="componentName"></component>
当data中的componentName的值改变的时候就会切换componentName代表的组件,如component1。
动态组件上使用keep-alive
如果我们直接切换component的话,一般情况会删除前一个组件,加载后面的组件,从而导致前一个组件的状态会重置,重新切回来的时候组件1会初始化。
使用keep-alive标签的话就可以保证组件会被缓存起来——
<keep-alive>
<component v-bind:is="componentName"></component>
</keep-alive>
Vue.component("async-component",function(resolve,reject){
setTimeout(function() {
resolve({
template:"<div>异步加载div</div>"
})
}, 2000);
})
var conponent1 = {
template: `<div @click="clickEvent">
这里是组件1,点击数量为{{count}}
</div>
`,
data: function() {
return {
count: 0
};
},
methods: {
clickEvent: function() {
this.count++;
}
}
};
var conponent2 = {
template: `<div @click="clickEvent">
这里是组件2,点击数量为{{count}}
</div>
`,
data: function() {
return {
count: 0
};
},
methods: {
clickEvent: function() {
this.count++;
}
}
};
var vm = new Vue({
el: ".apps",
data: {
componentName: "conponent1"
},
components: {
conponent1,conponent2
},
methods: {
clickEvent: function() {
if(this.componentName=="conponent1"){
Vue.set(vm,"componentName","conponent2")
}else{
Vue.set(vm,"componentName","conponent1")
}
}
}
});
这样就能保存状态切换组件了。
异步组件
组件创建可以使用Promise方式
Vue.component('async-example', function (resolve, reject) {
setTimeout(function () {
// 向 `resolve` 回调传递组件定义
resolve({
template: '<div>I am async!</div>'
})
}, 1000)
})
网友评论