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!
相关推荐
阿伟来咯~19 分钟前
记录学习react的一些内容
javascript·学习·react.js
吕彬-前端24 分钟前
使用vite+react+ts+Ant Design开发后台管理项目(五)
前端·javascript·react.js
学前端的小朱27 分钟前
Redux的简介及其在React中的应用
前端·javascript·react.js·redux·store
guai_guai_guai36 分钟前
uniapp
前端·javascript·vue.js·uni-app
Suckerbin41 分钟前
Hms?: 1渗透测试
学习·安全·网络安全
水豚AI课代表1 小时前
分析报告、调研报告、工作方案等的提示词
大数据·人工智能·学习·chatgpt·aigc
聪明的墨菲特i1 小时前
Python爬虫学习
爬虫·python·学习
Diamond技术流1 小时前
从0开始学习Linux——网络配置
linux·运维·网络·学习·安全·centos
斑布斑布1 小时前
【linux学习2】linux基本命令行操作总结
linux·运维·服务器·学习
bysking2 小时前
【前端-组件】定义行分组的表格表单实现-bysking
前端·react.js