Vue3_15（全局组件，局部组件，递归组件）

Posted 2023-04-23

参考技术A

例如组件使用频率非常高（table，Input，button，等）这些组件 几乎每个页面都在使用便可以封装成全局组件
案例------我这儿封装一个Card组件想在任何地方去使用

使用方法
在main.ts 引入我们的组件跟随在createApp(App) 后面 切记不能放到mount 后面这是一个链式调用用
其次调用 component 第一个参数组件名称 第二个参数组件实例

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

就是在一个组件内（A） 通过import 去引入别的组件(B) 称之为局部组件
应为B组件只能在A组件内使用 所以是局部组件
如果C组件想用B组件 就需要C组件也手动import 引入 B 组件

原理跟我们写js递归是一样的 自己调用自己 通过一个条件来结束递归 否则导致内存泄漏
案例递归树
在父组件配置数据结构 数组对象格式 传给子组件

子组件接收值

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

Vue中如何注册全局组件和局部组件(详解)

---

Vue 注册组件有两种，一种是全局组件，一种是局部组件。整个项目经常用到的用全局写法 (优点:多次使用,方便省事)，而使用局部组件的情况比较少(除需要专供特定页面)。

注册全局组件:

当你注册完之后，可以在任何组件中直接使用标签，而不需要在各个组件中引入并局部注册 通常公共组件放在src文件夹下的components文件夹中，这里的组件进行全局注册。

方法步骤:

1、在src文件夹中新建components文件夹，components文件夹中一般存放组件文件.
2、在文件夹中新建components.js文件
3、在components.js文件引入所有要注册的全局组件
4、在main.js中引入components.js文件并使用Vue.use()全局注册

代码演示: -components.js文件中

import 组件名字A from \'@/components/组件名字A\' 
import 组件名字B from \'@/components/组件名字B \' 

export default (Vue)=>{
  Vue.component("组件名字A", 组件名字A )  // 前者必须是字符串格式
  Vue.component(\'组件名字B\', 组件名字B )  
}

在main.js引入插件

import components from \'@/components/components.js\'

Vue.use(components)

new Vue({
  // ...
})

全局组件的使用(直接使用)

<组件名称></组件名称>

---

注册局部组件:

页面中私有的组件放在各自的页面文件夹中并使用下面代码局部注册

import ComponentA from \'./ComponentA\'
import ComponentB from \'./ComponentB\'
export default {
  name: "part",
  components: { ComponentA, ComponentB },
}