`vue3`+`ts`+`setup`语法糖实现一个无限嵌套的`tree`组件

最新推荐文章于 2024-05-15 08:26:45 发布
最新推荐文章于 2024-05-15 08:26:45 发布
阅读量999 收藏
点赞数
分类专栏： 前端 html 面试 文章标签： vue.js 前端 typescript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Ajekseg/article/details/123080977
版权

今天用vue3+ts+setup语法糖实现一个无限嵌套的tree组件，先看一下实现的效果，样式没有做过多的修饰。
1
本篇文章是很基础的内容，本人主要也是刚接触vue3这一套。最近也开始练手将公司开发时的一些vue2的组件用vue3来实现一套，也希望看到的人能有所获。

Vue3的setup语法糖

vue3中的setup的加入，使得vue可以从Options API转变为Composition API。Options API会导致data, methods, computed等必须分开到不同的对象中实现，使得逻辑过于分散。而Componsitions API可以将同一个功能写在setup中同一个代码块中，而不需要分开来写。有些同学可能觉得一个组件所有功能写在一起，会导致所有代码都在一坨，反而容易导致逻辑混乱，其实完全不必担心，vue3可以像react hook一样，把一段逻辑抽离，一个逻辑就是一个代码块，再在组件里面引入，这样逻辑清晰，同时方便复用，也取代了vue2中mixin的写法。看下面这张图就明白了&

最低0.47元/天 解锁文章
Ajekseg
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
【vue3 ＜script setup＞ props 使用与讲解】defineProps、withDefaults 类型限制、默认值设置
m0_67401228的博客
03-06 9600
本章主要涉及api内容：defineProps、withDefaults； defineProps 只能是要么使用`运行时声明`，要么使用`类型声明`。同时使用两种声明方式会导致编译报错。； defineProps、withDefaults 是只在 例子1 > 运行时声明 的方式只能设置参数类型、默认值、是否必传、自定义验证。报错为控制台warn警告。 若想设置[ 编辑器报错、编辑器语法提示 ]则需要使用类型声明的方式。 <script lang='ts' setup> c..
vue3组件之间双向绑定
徐三岁的博客
02-10 6062
Vue3中组件的双向绑定统一使用 v-model 进行处理，并且可以和多个数据进行绑定，例如 v-model:foo、v-model:bar。v-model:foo 等价于。v-model 等价于。父子组件之间双向绑定。
【VUE3】setup语法糖使用记录
xh1506101064的博客
06-23 2360
二、computed 使用 与vue2不同的是，Vue3需要引入相关内容 三、watch监听 使用watch也需要引入，使用方式与vue2相差不大，不同的是，监听多个属性的时候，要写多个watch。 如果写到一起的话，就会出现其中一个值变化，下面的方法都会触发，不能独立监听。 四、组件之间传参 在vue3中有setup语法糖，所以我们引入子组件之后无需注册，可以直接使用，子组件也不需要命名 组件之间传参 父子组件的双向绑定 1、通过prop向下传递， emit向上传递。1）父组件通过props向子组件传递内
请解释一下Vue3的树状组件是什么？它有什么特点？
最新发布
有我更精彩的博客
05-15 554
借助Vue3的树状组件，开发者能够快速地构建出美观、易用的树状结构页面，提升用户体验，实现更加复杂的前端功能。首先，Vue3的树状组件是基于Vue.js的响应式数据绑定机制构建的，这意味着当数据发生变化时，页面会自动更新，无需手动操作DOM。此外，Vue3的树状组件还具有丰富的配置项。开发者可以根据自己的需求，对树状组件进行自定义配置，比如节点的图标样式、展开收起的动画效果、节点的编辑权限等。在这段示例代码中，我们定义了一个简单的组织架构树状结构，并使用了Vue3的响应式数据绑定机制进行数据的展示。
【vue3】vue3 setup如何使用props？
热门推荐
qq_39576711的博客
03-18 5万+
setup是一个组件选项，在组件被创建之前，props 被解析之后执行。它是组合式 API 的入口。 他接受两个参数： {Data} props {SetupContext} context 在setup里边，第一个参数就是props，下面来看示例。 子组件propsTest.vue： <script lang="ts"> import { toRefs } from 'vue' interface Data { [key:string]:unknown } export defaul
记录--vue3+setup+ts 知识总结
林恒的博客
03-10 2885
这里给大家分享我在网上总结出来的一些知识，希望对大家有所帮助 vue3 于 2020 年 09 月 18 日正式发布，2022 年 2 月 7 日 vue3 成为新的默认版本 距离 vue3 正式发布已经过去两年有余, 成为默认版本也过去大半年了，以前还能说是对新技术、新特性的观望，而现在面试都直问 vue3 源码了。 我想，不管什么原因，是时候学习 vue3 了 所以这次我也顺便把学习...
在vue3+ts+setup语法糖中使用图片预览组件
09-14
在vue3+ts+setup语法糖中使用图片预览组件，下载直接安装运行
vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化
05-12
vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化vue3+ts+...
vue3+ts实战项目组件工具库.zip
03-03
vue3+ts实战项目组件工具库.zip vue3+ts实战项目组件工具库.zip vue3+ts实战项目组件工具库.zip
Vue3+TS：实现小红书瀑布流虚拟列表组件.zip
04-03
Vue3+TS：实现小红书瀑布流虚拟列表组件.zip
vue3+vite+ts 仿淘宝放大镜效果
09-17
1.本demo是一个类似于淘宝放大镜的效果。 2.使用vue3+vite搭建 3.实现了图片点击轮播和移入放大的效果 4.下载下来可直接使用，必须真实 有问题可以直接提问
vue组织树（树形组件vue3)
m0_49159526的博客
06-21 6940
本插件在element-plus树形组件基础上，进行了二次封装。适用于vue3项目，在具备了element-plus 的Tree组件的所有功能的基础上，又增加了组织树展示效果，并同时支持拖拽，及自定义组织树的展开收起样式......
Vue3---手写Tree组件
Dormiveglia-flx的博客
04-04 1459
1 添加myOptions ,使之双向绑定，绑定的数据来自prop.options传来的数据，不直接用prop.options传来数据的原因是因为要加isOpen，防止原数据遭到污染。但是问题是现在的数据有的item会有4层的children，有的item会有10层的children，，但是我们不能准确的知道需要使用多少个v-for。重点：通过isOpen属性的true，false，来使组件是否v-show隐藏显示。关于使用v-for 和 递归时候，数据是怎么渲染出来的分析。，这个时候，我们可以考虑。
vue3+ts实现多条件查询
qq_42458917的博客
03-10 2420
为大家详细介绍使用vue3+ts实现多条件和模糊搜索功能
虚树(Virtual Tree)学习笔记
dehukun0483的博客
01-23 785
虚树(Virtual Tree)学习笔记 一道题目(BZOJ-2286消耗战) Description 在一场战争中，战场由n个岛屿和n-1个桥梁组成，保证每两个岛屿间有且仅有一条路径可达。现在，我军已经侦查到敌军的总部在编号为1的岛屿，而且他们已经没有足够多的能源维系战斗，我军胜利在望。已知在其他k个岛屿上有丰富能源，为了防止敌军获取能源，我军的任务是炸毁一些桥梁，使得敌军不能到达...
vue中多层嵌套传递props,vue中provide/inject讲解(含vue2, vue3)
业余前端的职业经历
05-22 4047
不管react和vue其实都会有这个问题 在react中我们可以使用 context的方式进行传递 但是今天的主角并不是 react. 博主最近使用vue进行开发。 相信初学的小伙伴 肯定会碰见多层嵌套传递的问题 其实你也可以 根据 props 一层一层传递下去。但是不是贼麻烦 vue中给我提供了。provide 和 inject的方式 进行深层组件传递。 vue2中 在上层组件中 export default { provide: { foo :"hello world" } } // 当然有
vue 实现 tree 树形大量数据的多功能虚拟滚动-Virtual Tree
Brad_chao的博客
11-01 2万+
目录 源 卡顿假死 预研 开发 业务中使用 组件中引入 功能列表 使用 源 由于业务开发过程中有树形数据，因此需要用到tree树形组件，鉴于项目是基于vue的，前期的ui组件库选型就是element-ui，于是采用了el-tree组件。但在实际使用过程中出现了几个意外。 卡顿假死 server端返回全部数据时，渲染全量的tree组件时前端直接卡死，排查发现业务数据大部分子节点的量级在万以上。页面卡死这种事是要直接“掉脑袋”的，马上换成懒加载模式。 改成懒加载模式后，前两层节点的
vue 使用 vxe-list 实现虚拟列表实现虚拟树，virtual list 大数据量树列表
我的博客
04-28 8612
vxe-table vxe-list 实现虚拟树，大数据量树列表 在 vue 渲染树结构是比较卡的，特别是数据大了，展开缩写都要几秒，那么解决问题的思路就是减少 dom 渲染，使用虚拟列表来模拟树结构，这个方式可以渲染大量的数据，缺点是每次点击展开、收缩都要重新更新列表，可能会闪一下，效果略差，但是支持渲染大数据量。 实现虚拟树的步骤： 拍平树结构 构建列表树结构 处理展开收缩 测试中：渲染...
学习Vue3 第三十四章（Vue3集成Tailwind CSS）
qq1195566313的博客
05-25 1万+
Tailwind CSS 是一个 CSS 框架 它集成了诸如 flex, pt-4, text-center 和 rotate-90 这样的的类 官网地址Tailwind CSS 中文文档 - 无需离开您的HTML，即可快速建立现代网站。 1.安装 初始化项目 npm init vue@latest
在vue3+ts+setup语法糖下应该怎么写
05-12
在Vue 3中使用TypeScript和setup语法糖，可以按照以下步骤进行编写： 1. 安装必要的依赖 ```bash npm install vue@next vue-router@next @vue/compiler-sfc@next typescript@4.0.0 -D ``` 2. 创建一个Vue 3项目，并使用TypeScript编写代码 ```typescript // main.ts import { createApp } from 'vue' import App from './App.vue' import router from './router' const app = createApp(App) app.use(router) app.mount('#app') ``` ```typescript // App.vue <template> <div class="hello"> <h1>{{ msg }}</h1> </div> </template> <script lang="ts"> import { defineComponent } from 'vue' export default defineComponent({ name: 'HelloWorld', setup() { const msg = 'Hello Vue 3 + TypeScript + setup!' return { msg } } }) </script> ``` 3. 在Vue组件中使用setup语法糖 ```typescript // HelloWorld.vue <template> <div class="hello"> <h1>{{ msg }}</h1> </div> </template> <script lang="ts"> import { defineComponent } from 'vue' export default defineComponent({ name: 'HelloWorld', props: { msg: String }, setup(props, { attrs, slots, emit }) { // props: 传入的props // attrs: 组件上除了props之外的属性 // slots: 组件插槽 // emit: 触发父组件事件的方法 return { // 返回组件数据 } } }) </script> ``` 4. 在Vue Router中使用setup语法糖 ```typescript // router.ts import { createRouter, createWebHistory } from 'vue-router' import Home from './views/Home.vue' const router = createRouter({ history: createWebHistory(), routes: [ { path: '/', name: 'Home', component: Home, meta: { // 路由元信息 }, // 在路由组件中使用setup语法糖 setup() { // 返回组件数据 } } ] }) export default router ``` 以上是在Vue 3中使用TypeScript和setup语法糖的基本流程，你可以根据具体的需求进行调整和扩展。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值