您现在的位置是:主页 > Web前端技术 > Web前端技术

Vue组件怎么自动按需引入开发技术

IDCBT2021-12-28服务器技术人已围观

简介这篇文章主要为大家展示了“Vue组件怎么自动按需引入”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“Vue组件怎么自动按需引入

这篇文章主要为大家展示了“Vue组件怎么自动按需引入”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“Vue组件怎么自动按需引入”这篇文章吧。

在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,自动按需导入组件. 它会按需导入组件,但是不再需要导入和组件注册

标签:

很赞哦! ()

本栏推荐