vue3学习(四)

前言

接上篇学习笔记,分享3个内置组件:动态组件、缓存组件、分发组件基本用法。大家一起通过code的示例,从现象理解,注意再次理解生命周期。


一、code示例

组件A:CompA

html 复制代码
<script setup>
import {onMounted, onUnmounted} from "vue";

//再次理解生命周期

const compFun = () => {
  console.log("我是组件A");
}
//vue3,setup相当与created
compFun();

onMounted(() => {
  console.log("组件A挂载");
});

onUnmounted(() => {
  console.log("组件A销毁");
});


</script>

<template>
  <div class="compA">
    <h1>我是组件A</h1>
  </div>

</template>

<style scoped>
.compA{
  align-content: center;
}

</style>

组件B:CompB

html 复制代码
<script setup>
import {onMounted, onUnmounted} from "vue";

const compFun = () => {
  console.log("我是组件B");
}
//vue3,setup相当与created
compFun();

onMounted(() => {
  console.log("组件B挂载");
});

onUnmounted(() => {
  console.log("组件B销毁");
});
</script>

<template>
  <div class="CompB">
    <h1>我是组件B,我有插槽</h1>
    <slot></slot>
  </div>
</template>

<style scoped>
.CompB{
  align-content: center;
}

</style>

主页面AppMain.vue

html 复制代码
<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 = "<div><hr><h1>我是插槽内容</h1></div>";
  }
}

</script>

<template>
  <div class="App2">
    <h1>我是App2父组建</h1>
    <button @click="changeComp('CompA')">组件A</button>
    <button @click="changeComp('CompB')">组件B</button>
    <hr>
    <h1>动态组件切换展示区域,当前组件:{{ compName }}</h1>
    <!-- 缓存组件:缓存非活动组件 -->
    <keep-alive>
      <component v-bind:is="compName"><div v-html="slotContent"></div></component>
    </keep-alive>


  </div>
</template>

<style scoped>
.App2 {
  align-content: center;
}
</style>

main.js

html 复制代码
import { createApp } from 'vue'
//import App from './App.vue'
import AppMain from './AppMain.vue'

createApp(AppMain).mount('#app')

二、现象截图

1.初始化

2、点击按钮B

3、点击按钮A

  • console打印就这些,后面你再怎么点击,组件不会重新销毁、挂载了,这就是缓存组件的妙。
  • 插槽标签呢?slot

总结

  • 基本上动态组件跟子组件上加if、else逻辑一样,可能用的少
  • 缓存组件有编译奇葩问题,大家可以自己试着在"keep-alive"标签体内写注释试试,你会发现编译不通过
    笔记就记到这里,我们一起晚上睡梦中再理解下,uping!
相关推荐
HackKong3 分钟前
小白怎样入门网络安全?
网络·学习·安全·web安全·网络安全·黑客
霍先生的虚拟宇宙网络22 分钟前
webp 网页如何录屏?
开发语言·前端·javascript
Bald Baby25 分钟前
JWT的使用
java·笔记·学习·servlet
jessezappy42 分钟前
jQuery-Word-Export 使用记录及完整修正文件下载 jquery.wordexport.js
前端·word·jquery·filesaver·word-export
心怀梦想的咸鱼1 小时前
UE5 第一人称射击项目学习(四)
学习·ue5
AI完全体1 小时前
【AI日记】24.11.22 学习谷歌数据分析初级课程-第2/3课
学习·数据分析
旧林8431 小时前
第八章 利用CSS制作导航菜单
前端·css
程序媛-徐师姐1 小时前
Java 基于SpringBoot+vue框架的老年医疗保健网站
java·vue.js·spring boot·老年医疗保健·老年 医疗保健
yngsqq1 小时前
c#使用高版本8.0步骤
java·前端·c#
Mephisto.java2 小时前
【大数据学习 | Spark-Core】Spark提交及运行流程
大数据·学习·spark