五、Vue3基础之五

最新推荐文章于 2024-03-30 21:42:23 发布
最新推荐文章于 2024-03-30 21:42:23 发布
阅读量208 收藏
点赞数
分类专栏： VUE3 文章标签： vue3 vue3组件 typescript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42710036/article/details/127614305
版权

文章目录

一、vue3 slot

插槽是子组件中提供给父组件使用的一个占位符,父组件可以在这个占位符中填充任何模板代码，如html、组件等。
子组件提供坑，坑里填什么由父组件决定。

子组件挖坑：

<template>

    <div>
        <div class="div1">
            <!-- 匿名插槽 挖坑 -->
            <slot></slot>
        </div>
        <div class="div2">
            <!-- 挖坑-->
            <slot name="div2"></slot>
        </div>
        <div class="div3">

        </div>
    </div>
    
</template>

<script setup lang='ts'>
import { ref, reactive } from 'vue'

</script>

<style lang='scss' scoped>
.div1{
    width: 200px;
    height: 200px;
    background-color: yellow;
}
.div2{
    width: 200px;
    height: 200px;
    background-color: blueviolet;
}
.div3{
    width: 200px;
    height: 200px;
    background-color: pink
}

</style>

父组件填坑

<template>
    <div>
        右侧内容区域
        <A>
            <!-- 填坑 -->
            <template v-slot>
                <h2>匿名插槽</h2>
            </template>
            <template v-slot:div2>
                <h2>具名插槽</h2>
            </template>
        </A>
    </div>
</template>

<script setup lang='ts'>
import { ref, reactive, markRaw } from 'vue'
import A from './A.vue'
import B from './B.vue'
import C from './C.vue'
</script>
<style lang='scss' scoped>
</style>

子组件通过插槽向父组件传数据
子组件

<template>

    <div>
        <div class="div1">
            <!-- 匿名插槽 -->
            <slot></slot>
        </div>
        <div class="div2">
            <div v-for="(item, index) in data">
                <!-- 通过这个坑向父组件传数据过去了 -->
                <slot name="div2" :index="index" :data="item"></slot>
            </div>
            
        </div>
        <div class="div3">

        </div>
    </div>

</template>

<script setup lang='ts'>
import { ref, reactive } from 'vue'
type Person = {
    name: string, 
    age: number
}
const data = reactive<Person[]>([
    {
        name: '张三',
        age: 18
    },
    {
        name: '李',
        age: 19
    },
    {
        name: '王五',
        age: 20
    },
    {
        name: '赵六',
        age: 21
    },
])

</script>

<style lang='scss' scoped>
.div1{
    width: 200px;
    height: 200px;
    background-color: yellow;
}
.div2{
    width: 200px;
    height: 200px;
    background-color: blueviolet;
}
.div3{
    width: 200px;
    height: 200px;
    background-color: pink
}

</style>

父组件

<template>
    <div>
        右侧内容区域
        <A>
            <template #default>
                <h2>匿名插槽</h2>
            </template>
            <template v-slot:div2="{index, data}">
                <h2>具名插槽--{{index}}--{{data.name}}--{{data.age}}</h2>
            </template>
        </A>
    </div>
</template>

<script setup lang='ts'>
import { ref, reactive, markRaw } from 'vue'
import A from './A.vue'
import B from './B.vue'
import C from './C.vue'


</script>

<style lang='scss' scoped>

</style>

动态插槽

<template>
    <div>
        右侧内容区域
        <A>
            <!-- 这个name我可以动态给它赋值就达到了动态插槽 -->
            <template #[name]>
                <h2>匿名插槽</h2>
            </template>

        </A>
    </div>
</template>

<script setup lang='ts'>
import { ref, reactive, markRaw } from 'vue'
import A from './A.vue'

let name = ref('div2')

</script>

<style lang='scss' scoped>

</style>

二、异步组件

我们打包发布的时候会打成一个js文件，如果定义成异步组件，就会单独打包成一个js文件，用到的时候再加载进来。
在public文件下建一 个data.json文件,用来模拟数据

[
    {
        "name": "张三"
    },
    {
        "name": "李四"
    },
    {
        "name": "王五"
    },
    {
        "name": "赵六"
    }
]

在Content下建一个server.ts用来模拟axios,异步获取数据

type NameList = {
    name: string
}

export const axios = (url:string):Promise<NameList[]> => {
    return new Promise((resolve) => {
        let xhr: XMLHttpRequest = new XMLHttpRequest()
        xhr.open('get', url)
        xhr.onreadystatechange = () => {
            if(xhr.readyState ===4 && xhr.status == 200){
                setTimeout(()=>{
                    resolve(JSON.parse(xhr.responseText))
                }, 2000)
            }
        }
    })
}

父组件

<template>
    <div>
        右侧内容区域
        <Suspense>
            <!-- 异步组件获取到了数据的显示 -->
            <template #default>
                <C></C>
            </template>
            <!-- 异步组件未获取到的数据显示-->
            <template #fallback>
                 loading......
            </template>
        </Suspense>
    </div>
</template>

<script setup lang='ts'>
import { defineAsyncComponent } from 'vue'
// 用defineAsyncComponent来加载异步组件
const C = defineAsyncComponent(()=>import('./C.vue'))

</script>

<style lang='scss' scoped>

</style>

子组件

<template>

    <div>
        CCCCCCCCCCCCCCCCCCCC
        <ul v-for="item,index in list" :key="index">
            <li>{{item.name}}</li>
        </ul>
    </div>

</template>

<script setup lang='ts'>
import { ref, reactive } from 'vue'
import { axios } from './server'

// 在public下的文件为什么这里请求是./data.json呢？
// await自动获取到.then的数据
const list = await axios('./data.json')
console.log(list)

</script>

<style lang='scss' scoped>

</style>

三、vue3 Teleport传送组件

Vue3.0新特性之一，能够将我们的模板渲染到指定DOM节点，不受父组style,v-show等属性影响，但data,prop数据依旧能够共用的技术。
Teleport节点搭载在其他指定的DOM节点下，完全不受父级style样式影响。

<Teleport to="body">
     <!-- 将A组件放进body中,独立style等-->
    <A></A>
</Teleport>

四、vue3 keep-alive缓存组件

有时候我们希望组件被重新渲染影响使用体验，或者处于性能考虑，避免多次重复渲染降低性能，而是希望组件可以缓存下来维持当前的状态，这时候就要用到keep-alive组件。

<keep-alive>
     <!-- 
     被keep-alive包裹的组件会被缓存，如A组件中有一个表单，
     你输入了一些东西，但用户有其他事切换到了其他组件中，返
     回这个A组件时输入的东西还在，可以提高用户体验
     <keep-alive :include="['A']"> 只包含A组件
     :exclude 不包含某某组件
     -->
    <A v-if="flag"><A>
    <B v-else><B>
</keep-alive>

使用了keep-alive包裹的组件新增了两个生命周期

onActivated(()=>{
    console.log('keep-alive初始化')
})
onDeactivated(()=>{
    console.log('keep-alive卸载')
})

五、vue3 transition动画组件

vue提供了transtion的封装组件，在下列情况中，可以给任何元素和组件添加进入、离开过渡

  • 条件渲染（使用v-if）
  • 条件展示（使用v-show)
  • 动态组件
  • 组件根节点

案例：transition动画组件使用

<template>
    <div>
        <button @click="flag=!flag">switch</button>
        <transition name="fade">
            <div v-if="flag" class="box"></div>
        </transition>
    </div>
</template>

<script setup lang='ts'>
import { ref } from 'vue'

const flag = ref<boolean>(true)

</script>

<style lang='scss' scoped>
.box{
    width: 200px;
    height: 200px;
    background-color: palevioletred;
}
// 进入动画之前,具体的属性可翻看vue官方文档
.fade-enter-from{
    width: 0;
    height: 0;
}
.fade-enter-active{
    transition: all 1.5s ease;
}
.fade-enter-to{
    width: 200px;
    height: 200px;
}
</style>

vue3的动画组件有很多特征，可以自行看一下。

六、Provide、Inject

在这里插入图片描述
在这里插入图片描述
App.vue

<template>
    <h1>App.vue根组件</h1>
    <label>
        <input v-model="colorVal" value="red" name="color" type="radio">
        红色
    </label>
    <label>
        <input v-model="colorVal" value="pink" name="color" type="radio">
        粉色
    </label>
    <label>
        <input v-model="colorVal" value="yellow" name="color" type="radio">
        黄色
    </label>
    
    <div class="box"></div>
    <provideA></provideA>

</template>

<script setup lang="ts">
import {ref, provide} from 'vue'
import provideA from './components/provideA.vue'
const colorVal = ref<string>('red')
// 将数据注入进去,子组件中就可以使用inject读取这个数据了
provide('color', colorVal)
</script>

<style lang="scss" scoped>
.box{
    width: 50px;
    height: 50px;
    border: 1px solid red;
    background-color: v-bind(colorVal);
}
</style>

provideA.vue

<template>

    <h2>provideA</h2>
    <div class="box"></div>
    <provideB></provideB>
</template>

<script setup lang='ts'>
import { ref, reactive, inject } from 'vue'
import { Ref } from 'vue'
import provideB from './provideB.vue'
const color = inject<Ref<string>>('color')


</script>

<style lang='scss' scoped>
.box{
    width: 50px;
    height: 50px;
    border: 1px solid red;
    // vue3中css可以使用v-bind绑定setup中的变量
    background-color: v-bind(color);
}
</style>

provideB.vue

<template>

    <h2>provideB</h2>
    <div class="box">

    </div>

</template>

<script setup lang='ts'>
import { ref, reactive, inject } from 'vue'
import { Ref } from 'vue'
const color = inject<Ref<string>>('color')

</script>

<style lang='scss' scoped>
.box{
    width: 50px;
    height: 50px;
    border: 1px solid red;
    background-color: v-bind(color);
}
</style>
永恒的宁静
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
Vue3-组件与动画
nnjjn的博客
03-02 631
组件 什么是组件：？ 一个小的功能分区，是可以重复使用的模块 复杂项目拆分简单的组件让团队开发更高效； 定义组件 const toggle={ template:`<button @click="change"><span v-if="open">开</span><span v-else>关</span></button>`, data(){ return{
vue3相关.docx
09-27
Vue3 相关知识点总结 一、安装及目录结构 * 使用 Vue/cli 安装（要求 @vue/cli 版本需在 4.5.0 及以上） * 亦可以选择 vite（vite 创建的速度比上面的方法快） 二、Main.js * createApp 的参数是根组件（App），...
一个vue3注册表单，自定义element-ui的label样式
Heartnottowake的博客
06-25 968
【代码】一个vue3注册表单，自定义element-ui的label样式。
vue3中如何修改elementui的label标签的字体颜色
最新发布
qq_53493536的博客
03-30 714
在vue3中，如果想要修改label标签的颜色，我们不能在局部的样式下修改，vue3中就是指<style scoped>,我们需要去除scoped ,然后用.el-form-item__label选中元素，注意这里的下划线是两个，修改颜色，同时，如果无法成功的话，那么优先级可能不够，还需要加上！important。important;/* 设置 label 的字体颜色 */只是这样修改，那么修改的效果就会全局生效，而不是仅仅在当前组件中生效了。
vue3 el-form-item 自定义label标签内容
jieyucx的博客
11-23 2698
vue3 el-form-item自定义lable标签内容
vue-echarts-v3 使用 label显示格式
weixin_30781775的博客
08-29 641
<template> <div class="echarts"> <IEcharts :option="pie" @ready="onReady" @click="onClick"></IEcharts> </div> </template> <script> import IEcharts fro...
vue实践基础项目面试题
01-10
Vue 实践基础项目面试题 以下是对给定文件信息的详细解释和知识点总结： 一、CSS 作用域 在 Vue 中，CSS 只在当前组件起作用，可以通过在 style 标签中写入 scoped 即可，例如：<style scoped></style> 二、v-if...
vite+vue3+gin搭建的开发基础平台.zip
01-12
基于vite+vue3+gin搭建的开发基础平台（已完成setup语法糖版本），集成jwt鉴权，权限管理，动态路由，分页封装，多点登录拦截，资源权限，上传下载，代码生成器，表单生成器等开发必备功能，五分钟一套CURD前后端...
Vue面试题合集下载.pdf
12-14
本资源为一份 Vue 面试题合集，涵盖了 Vue 基础知识、双向数据绑定原理、MVVM 模式、MVC 模式和 MVP 模式等多个方面。 一、Vue 基础知识 * Vue 的基本原理：当一个 Vue 实例创建时，Vue 会遍历 data 中的属性，并...
# vue3 ref 和 reactive 函数.doc
07-11
Vue3 中的 Ref 和 Reactive 函数 在 Vue3 中，Ref 和 Reactive 函数是两个非常重要的概念，它们都是用于实现响应式数据的关键技术。本文将从基本概念开始，详细介绍 Ref 函数的用法、Reactive 函数的应用，以及它们...
Vue3 关于 reactive 函数嵌套 computed / inject / props 的情况
cookcyq__的博客
12-09 3510
关于 Vue3 reactive 函数嵌套 computed / inject / props 的情况
【vue3】vue3的三种写法（附带provide/inject、toRefs说明、ref，reactive的区别）
hzxOnlineOk的博客
04-06 3084
vue3的三种写法（附带provide/inject、toRefs说明）
Vue Provide / Inject 详细介绍（跨组件通信、响应式变化、版本变化）
高大志leo的博客
12-21 1万+
背景 通常，当我们需要从父组件向子组件传递数据时，我们使用props。想象一下这样的结构：有一些深度嵌套的组件，而深层的子组件只需要父组件的部分内容。在这种情况下，如果仍然将 prop 沿着组件链逐级传递下去，可能会很麻烦。 对于这种情况，我们可以使用一对provide和inject。无论组件层次结构有多深，父组件都可以作为其所有子组件的依赖提供者。这个特性有两个部分：父组件有一个provide选项来提供数据，子组件有一个inject选项来开始使用这些数据。 使用 假设有一个组件...
vue3学习（十一）transition动画组件
weixin_70617457的博客
01-03 1052
flag">显示或隐藏.box{}// 进入的过渡动画// 开始进入height: 0;width: 0;}// 进入过程}// 进入结束}// 离开的过渡动画// 开始离开}// 离开过程}// 离开结束height: 0;width: 0;}flag">显示或隐藏// 对应的css.e-from{height: 0;width: 0;
Vue3 Transition组件给页面切换加动画效果
前端咸鱼翻身的博客
05-05 9437
使用Vue3自带的Transition组件给页面组件之间切换加过渡效果，主要应用在移动端设备，改善用户的交互体验。
HTML label标签介绍
热门推荐
蝈蝈的博客
06-03 5万+
label标签介绍label标签为input元素定义标注(标记)，它不会向用户呈现任何特殊效果，和span标签类似。但label标签和span标签最大的区别就是它为鼠标用户改进了可用性，可以关联特定的表单控件。label标签和特定表单控件关联之后，如果用户在 label 元素内点击文本，就会触发关联的表单控件。就是说，当用户选择该label标签时，浏览器就会自动将焦点转到和label标签相关的表单控
vue3标注ailabel
Tanjc518的博客
06-22 3333
ailabel标注
inject 响应式_Vue.js中provide/inject实现响应式数据更新
weixin_35089515的博客
02-23 904
首先了解Vue.js中provide/inject的基本用法：官方的说明大家可以打开上面的链接去看，说通俗点，就是可以用来父辈们给祖孙传值，请看清楚，这里说的是可以隔代传值，传统的props只能父传子，不论子组件有多深，只要调用了inject那么就可以注入provider中的数据。而不是局限于只能从当前父组件的prop属性来获取数据，这就是它最大的特性。基本用法：provide 选项应该是：一个对...
vue3 typescript案例练习
08-28
这些文章涵盖了Vue3基础知识点和TypeScript知识点，并提供了沿途的学习案例和项目实战代码。另外，您还可以参考中的Vue3 TypeScript从入门到进阶（三）的文章，了解更多Vue3基础知识点。这些资源将帮助您进行Vue3 ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

永恒的宁静

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值