做展览的网站,企业网站一定要从建立网站开始,二手备案域名购买,聚名网是什么前言 接上篇学习笔记#xff0c;分享3个内置组件#xff1a;动态组件、缓存组件、分发组件基本用法。大家一起通过code的示例#xff0c;从现象理解,注意再次理解生命周期。 一、code示例
组件A#xff1a;CompA
script setup
import {onMounted, onUnmounted} f…前言 接上篇学习笔记分享3个内置组件动态组件、缓存组件、分发组件基本用法。大家一起通过code的示例从现象理解,注意再次理解生命周期。 一、code示例
组件ACompA
script setup
import {onMounted, onUnmounted} from vue;//再次理解生命周期const compFun () {console.log(我是组件A);
}
//vue3setup相当与created
compFun();onMounted(() {console.log(组件A挂载);
});onUnmounted(() {console.log(组件A销毁);
});/scripttemplatediv classcompAh1我是组件A/h1/div/templatestyle scoped
.compA{align-content: center;
}/style组件BCompB
script setup
import {onMounted, onUnmounted} from vue;const compFun () {console.log(我是组件B);
}
//vue3setup相当与created
compFun();onMounted(() {console.log(组件B挂载);
});onUnmounted(() {console.log(组件B销毁);
});
/scripttemplatediv classCompBh1我是组件B,我有插槽/h1slot/slot/div
/templatestyle scoped
.CompB{align-content: center;
}/style主页面AppMain.vue
script setup
import {ref, defineOptions} from vue;
import CompA from ./components/CompA.vue;
import CompB from ./components/CompB.vue;//vue3不这样定义会切换无效但是compName的值却是改变的
defineOptions({components: {CompA,CompB}
})// ref创建响应式数据
const compName ref(CompA);//
const slotContent ref();function changeComp(changeCompName) {console.log(原组件, compName.value, 新组件, changeCompName);compName.value changeCompName;if (changeCompName CompB) {slotContent.value divhrh1我是插槽内容/h1/div;}
}/scripttemplatediv classApp2h1我是App2父组建/h1button clickchangeComp(CompA)组件A/buttonbutton clickchangeComp(CompB)组件B/buttonhrh1动态组件切换展示区域当前组件{{ compName }}/h1!-- 缓存组件缓存非活动组件 --keep-alivecomponent v-bind:iscompNamediv v-htmlslotContent/div/component/keep-alive/div
/templatestyle scoped
.App2 {align-content: center;
}
/stylemain.js
import { createApp } from vue
//import App from ./App.vue
import AppMain from ./AppMain.vuecreateApp(AppMain).mount(#app)
二、现象截图
1.初始化 2、点击按钮B 3、点击按钮A console打印就这些后面你再怎么点击组件不会重新销毁、挂载了这就是缓存组件的妙。插槽标签呢slot 总结
基本上动态组件跟子组件上加if、else逻辑一样可能用的少缓存组件有编译奇葩问题大家可以自己试着在“keep-alive”标签体内写注释试试你会发现编译不通过 笔记就记到这里我们一起晚上睡梦中再理解下uping
