Shulou(Shulou.com)06/02 Report--

This article mainly shows you "how to automatically introduce Vue components on demand", the content is easy to understand, clear, hope to help you solve your doubts, the following let the editor lead you to study and learn "how to automatically introduce Vue components on demand" this article.

In Vue, we can use components by means of global components and local registration.

Global registration

Create global components through app.component

Import {createApp} from 'vue'import HelloWorld from'. / components/HelloWorld'const app = createApp ({}) / / globally register a component named hello-wolrd app.component ('hello-wolrd', HelloWorld)

Once we have registered the component globally, we can use it anywhere:

It is worth noting that global registration makes Vue lose the support of TypeScript, and Vue 3 has an PR interface that extends the global component. Currently, Volar already supports this usage, and we can add TypeScript support for all-to-local components by adding components.d.ts files to the root directory

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

We can import vue components directly from the file to use the

In a single file component (SFC)

Import HelloWorld from'. / components/HelloWorld.vue'export default {name: 'App', components: {HelloWorld}}

In JSX

Import HelloWolrd from'. / components/HelloWorld.vue'export default {name: "item", render () {return ()}}

A locally registered component is inaccessible in other components and is not available in its parent or child components, so you need to reintroduce and register the component at each place where it is used

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

But another advantage of this direct import of components is that if we import components that use typescript, we can get smart prompts and type checking in components without any plug-ins.

Local automatic registration

We can see that the advantages of partial registration are obvious, but we need to import repeatedly every time we use it, but if you have a lot of components, your component registration code may look lengthy, we can use unplugin-vue-components to automatically import components on demand. It imports components on demand, but no longer requires import and component registration

The plug-in automatically generates a components.d.ts for the components used to get TypeScript support.

Install the plug-in

Vite

/ / vite.config.tsimport Components from 'unplugin-vue-components/vite'export default defineConfig ({plugins: [Components ({/ * options * /}),],})

Rollup

/ / rollup.config.jsimport Components from 'unplugin-vue-components/rollup'export default {plugins: [Components ({/ * options * /}),],}

Webpack

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

Then we can use the component in the template as usual, and it automatically makes the following transformation

Export default {name: 'App'}

Convert to

Import HelloWorld from'. / src/components/HelloWorld.vue'export default {name: 'App', components: {HelloWorld}}

By default, it looks for components under the src/components directory. We can customize the component directory through the dirs parameter, and refer to github.com/antfu/unplu for other configurations.

Comparison of different schemes

Global registration local registration unplugin-vue-componentsTypeScript support definition components.d.ts file default support automatic generation of components.d.ts file component scope global local usage method global registration use after local registration use after adding plug-ins about component names

There are two ways to define a component name:

Use kebab-case:

Vue.component ('my-component-name', {/ *... * /}) when defining a component using kebab-case (dash separated naming), you must also use kebab-case when referencing this custom element, for example.

Use hump nomenclature PascalCase

Vue.component ('MyComponentName', {/ *... * /}) when defining a component using PascalCase (uppercase naming), you can use both naming methods when referencing this custom element. In other words, both and are acceptable. Note, however, that only kebab-case is valid when used directly in DOM (that is, non-string templates).

Therefore, we generally recommend that components use the naming method of kebab-case.

The above is all the content of the article "how to introduce Vue components automatically on demand". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.