11.vue3 的全局组件,局部组件,递归组件 1.封装组件:<template> <div class="card"> <div class="card-header"> <div>标题</div> < 2025-01-30 leader755 12.动态组件 在挂载点使用component标签,然后使用v-bind:is=”组件”,通过 is 切换 A B 组件 import A from './A.vue' import B from './B.vue' 使用场景:ta 2025-01-30 leader755 13.插槽slot 1.匿名插槽 2132 2.具名插槽 具名插槽其实就是给插槽取个名字。一个子组件可以放多个插槽,而且可以放在不同的地方,而父组件填充内容时,可以根据这个名字把内容填充 2025-01-30 leader755 14.异步组件&代码分包&suspense 异步组件在大型应用中,我们可能需要将应用分割成小一些的代码块 并且减少主包的体积这时候就可以使用异步组件 顶层 **<font style="color:rgb(79, 79, 79);">await< 2025-01-30 leader755 15.Teleport传送组件 <font style="color:rgb(77, 77, 77);">Teleport</font> Vue 3.0 新特性之一。 <font style="color:rg 2025-01-30 leader755 16.keep-alive缓存组件 内置组件 keep-alive有时候我们不希望组件被重新渲染影响使用体验;或者处于性能考虑,避免多次重复渲染降低性能。而是希望组件可以缓存下来,维持当前的状态。这时候就需要用到<font style="color:rgb( 2025-01-30 leader755 17.transition动画组件 Vue 提供了 transition 的封装组件,在下列情形中,可以给任何元素和组件添加进入/离开过渡: 条件渲染 (使用 v-if) 条件展示 (使用 v-show) 动态组件 组件根节点 自定义 transition 过度效果,你需要对 2025-01-30 leader755 18.transition-group过度列表 单个节点 多个节点,每次只渲染一个 那么怎么同时渲染整个列表,比如使用 v-for?在这种场景下,我们会使用 <transition-group> 组件。在我们深入例子之前,先了解关于这个组件的几个特点: 默认情况下 2025-01-30 leader755 19.依赖注入Provide ! Inject 1、propsvue 中我们要从父组件向子组件传递数据时,会使用 props。如果需要给深层子组件传递数据,会非常麻烦,如下图: 2、2/Provide / Inject一个父组件相对于其所有的后代组件,会作为依赖提供者。任何后代的组件树 2025-01-30 leader755 20.attrs 属性 1.attrs 属性 在 Vue 3 中,<font style="color:rgb(6, 6, 7);">attrs</font> 是一个包含了父作用域中不作为 <font style= 2025-01-30 leader755 21.兄弟组件传参和Bus 1.借助父组件传参 import A from "./components/A.vue"; import B from "./components/B.vue"; import { ref } from 2025-01-30 leader755 AI 工具使用集合 AI 建站 https://www.cursor.com/ https://codeium.com/windsurf https://bolt.new/ https://v0.dev/ https://www.co.dev/ https:/ 2025-01-30 leader755