vue3学习(八)--- 组件相关

文章目录

  • 全局组件
    • 批量注册全局组件
  • 局部组件
  • 递归组件
    • 组件定义名称方式
      • 1.增加一个script 通过 export 添加name
      • 2.直接使用文件名当组件名
      • 3.使用插件 unplugin-vue-define-options
  • 动态组件
  • 异步组件

一个 Vue 组件在使用前需要先被“注册”,这样 Vue 才能在渲染模板时找到其对应的实现。组件注册有两种方式:全局注册和局部注册。

全局组件

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

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

import { createApp } from 'vue'
import App from './App.vue'
import './assets/css/reset/index.less'
import Card from './components/Card/index.vue'
 
 
createApp(App).component('Card',Card).mount('#app')

注册完之后直接在其他vue页面 立即使用即可 无需引入。

批量注册全局组件

可以参考element-ui 其实就是遍历一下然后通过 app.component 注册
vue3学习(八)--- 组件相关_第1张图片


局部组件

全局注册虽然很方便,但有以下几个问题:

  1. 全局注册,但并没有被使用的组件无法在生产打包时被自动移除 (也叫“tree-shaking”)。如果你全局注册了一个组件,即使它并没有被实际使用,它仍然会出现在打包后的 JS 文件中。

  2. 全局注册在大型项目中使项目的依赖关系变得不那么明确。在父组件中使用子组件时,不太容易定位子组件的实现。和使用过多的全局变量一样,这可能会影响应用长期的可维护性。

相比之下,局部注册的组件需要在使用它的父组件中显式导入,并且只能在该父组件中使用。它的优点是使组件之间的依赖关系更加明确,并且对 tree-shaking 更加友好。

在使用

你可能感兴趣的:(vue3,vue.js,前端,javascript)