学习Vue3 第十五章(全局组件,局部组件,递归组件)

lxf2024-04-06 13:16:06

  例如组件使用频率非常高(table,Input,button,等)这些组件 几乎每个页面都在使用便可以封装成全局组件

  案例------我这儿封装一个Card组件想在任何地方去使用

  学习Vue3 第十五章(全局组件,局部组件,递归组件)

  使用方法

  在main.ts 引入我们的组件跟随在createApp(App) 后面 切记不能放到mount 后面这是一个链式调用用

  其次调用 component 第一个参数组件名称 第二个参数组件实例

  使用方法

  直接在其他vue页面 立即使用即可 无需引入

  可以参考element ui 其实就是遍历一下然后通过 app.component 注册

  学习Vue3 第十五章(全局组件,局部组件,递归组件)

  就是在一个组件内(A) 通过import 去引入别的组件(B) 称之为局部组件

  应为B组件只能在A组件内使用 所以是局部组件

  如果C组件想用B组件 就需要C组件也手动import 引入 B 组件

  原理跟我们写是一样的 自己调用自己 通过一个条件来结束递归 否则导致内存泄漏

  案例递归树

  在父组件配置数据结构 数组对象格式 传给子组件

  子组件接收值 第一个script

  学习Vue3 第十五章(全局组件,局部组件,递归组件)

  3.使用插件 unplugin-vue-macros/README-zh-CN.md at 722a80795a6c7558debf7c62fd5f57de70e0d0bf · sxzz/unplugin-vue-macros · GitHub unplugin-vue-define-options

   ts支持

  学习Vue3 第十五章(全局组件,局部组件,递归组件)

  template 

  TreeItem 其实就是当前组件 通过import 把自身又引入了一遍 如果他没有children 了就结束

  学习Vue3 第十五章(全局组件,局部组件,递归组件)