网站备案 建设方案书,网站域名购买com,前端开发培训机构怎么样,网站空间后台登录vue-动态组件、keep-alive
如果我们想写一个tabbar导航栏#xff0c;我能想到的两种方式
通过if条件判断的方式实现#xff08;不赘述#xff09;动态组件
接下来我们就看看动态组件如何创建#xff0c;废话不多少直接上代码#xff08;代码中有备注#xff09;
首先…vue-动态组件、keep-alive
如果我们想写一个tabbar导航栏我能想到的两种方式
通过if条件判断的方式实现不赘述动态组件
接下来我们就看看动态组件如何创建废话不多少直接上代码代码中有备注
首先创建一个调用组件的文件
templatediv classcontainer!-- keep-alive缓存组件 --!-- include指定缓存组件名缓存多个用逗号分隔开 --!-- exclude指定不缓存组件名 缓存多个用逗号分隔开--keep-alive includeFirst,Last!-- 通过切换show值切换组件--!-- is绑定组件名--component :isshow/component/keep-alive!-- 点击触发方法切换show的值--button clickchange()切换/button/div
/templatescript
//导入组件
import First from ./First.vue;
import Last from ./Last.vue;export default {components: {First, Last},data() {return {show: First}},methods: {//切换的函数change() {if(this.show First){this.show Last;}else{this.show First;}}}
}
/script
接下来是两个组件 组件1
templatediv!-- 设置num增加是为了测试组件是否缓存--!-- 如果没有缓存数值变化再切换会变回原始的数值 --h3First: {{ num }}/h3button clickadd()增加/button/div
/templatescript
export default {data() {return {num: 0}},methods: {add() {this.num 1;}},//组件会触发的生命周期activateddeactivatedactivated() {console.log(创建)},deactivated() {console.log(销毁)}
}
/script
组件2
templatedivh3Last: {{ num }}/h3button clickadd()增加/button/div
/templatescript
export default {data() {return {num: 0}},methods: {add() {this.num 1;}},activated() {console.log(创建)},deactivated() {console.log(销毁)}
}
/script
