• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

Vue组件如何自动按需引入详析

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

在Vue中我们可以通过全局组件、局部注册的方式来使用组件

全局注册

通过app.component来创建全局组件

import { createApp } from 'vue'
import HelloWorld from './components/HelloWorld'

const app = createApp({})

// 全局注册一个名为hello-wolrd的组件
app.component('hello-wolrd', HelloWorld);

一旦我们全局注册了组件,我们就可以在任何地方使用这个组件:<hello-wolrd/>

值得注意的是全局注册会使Vue失去TypeScript的支持, Vue 3 有一个 PR 扩展了全局组件的接口。目前,Volar 已经支持这种用法,我们可以通过在根目录添加components.d.ts文件的方式来添加全对局组件的TypeScript的支持

declare module 'vue' {
  export interface GlobalComponents {
    HelloWorld: typeof import('./src/components/HelloWorld.vue')['default']
  }
}

局部注册

我们可以直接从文件中引入vue组件使用,

在单文件组件中(SFC)

<template>
  <HelloWorld msg="Welcome to Your Vue.js App"/>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'App',
  components: {
    HelloWorld
  }
}
</script>

在JSX中

import HelloWolrd from './components/HelloWorld.vue'
export default {
  name: "item",
  render(){
    return (
      <HelloWolrd msg="Welcome to Your Vue.js App"/>
    )
  }
}

局部注册的组件在其他组件中无法访问,在其父组件或子组件或中均不可用,所以你需要在每个使用该组件的地方重新引入并注册该组件

import HelloWolrd from './components/HelloWorld.vue'

但是这种直接导入组件的方式还有一个好处,如果我们导入的组件使用了typescript,我们无需任何插件就可以在组件中获得智能提示和类型检查的功能

局部自动注册

可以看到局部注册的优点是比较明显的,但是每次使用我们都需要重复导入,但是如果你的组件很多,你的组件注册代码看起来可能比较冗长,我们可以使用unplugin-vue-components,自动按需导入组件. 它会按需导入组件,但是不再需要导入和组件注册

该插件会自动对使用的组件生成一个components.d.ts从而获得TypeScript的支持,

安装插件

vite

// vite.config.ts
import Components from 'unplugin-vue-components/vite'

export default defineConfig({
  plugins: [
    Components({ /* options */ }),
  ],
})

rollup

// rollup.config.js
import Components from 'unplugin-vue-components/rollup'

export default {
  plugins: [
    Components({ /* options */ }),
  ],
}

webpack

// webpack.config.js
module.exports = {
  /* ... */
  plugins: [
    require('unplugin-vue-components/webpack')({ /* options */ })
  ]
}

然后我们可以像往常一样在模板中使用组件,它会自动进行下面的转换

<template>
  <div>
    <HelloWorld msg="Hello Vue 3.0 + Vite" />
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

转换成

<template>
  <div>
    <HelloWorld msg="Hello Vue 3.0 + Vite" />
  </div>
</template>

<script>
import HelloWorld from './src/components/HelloWorld.vue'

export default {
  name: 'App',
  components: {
    HelloWorld
  }
}
</script>

默认它会在src/components目录下查找组件,我们可以通过dirs参数来自定义组件目录,其他配置参考github.com/antfu/unplu

不同方案对比

全局注册 局部注册 unplugin-vue-components
TypeScript支持 定义components.d.ts文件 默认支持 自动生成components.d.ts文件
组件作用域 全局 局部 局部
使用方法 全局注册后使用 局部注册后使用 添加插件后使用

关于组件名

定义组件名的方式有两种:

使用 kebab-case:

Vue.component('my-component-name', { /* ... */ })
当使用 kebab-case (短横线分隔命名)定义一个组件时,
你也必须在引用这个自定义元素时使用 kebab-case,例如 <my-component-name>。

使用 驼峰命名法PascalCase

Vue.component('MyComponentName', { /* ... */ })
当使用 PascalCase (首字母大写命名) 定义一个组件时,
你在引用这个自定义元素时两种命名法都可以使用。
也就是说 <my-component-name> 和 <MyComponentName>都是可接受的。
注意,尽管如此,直接在 DOM (即非字符串的模板) 中使用时只有 kebab-case 是有效的。

所以我们一般建议组件都采用kebab-case这种命名方式。

参考

v3.cn.vuejs.org/guide/compo

v3.cn.vuejs.org/guide/types

github.com/antfu/unplu

总结

到此这篇关于Vue组件如何自动按需引入的文章就介绍到这了,更多相关Vue组件自动按需引入内容请搜索极客世界以前的文章或继续浏览下面的相关文章希望大家以后多多支持极客世界!


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
使用nodejs + koa + typescript 集成和自动重启的问题发布时间:2022-02-05
下一篇:
基于React Hooks的小型状态管理详解发布时间:2022-02-05
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap