vue3.0 CLI - 2.6 - Introduction to Component Reuse Tutorial

My github address -vue3.0Study - The learning results of stages will be branched.

==========================

Define a basic component

This basic component is a basic component that can be reused in the navigation bar for a single navigation.

Basic Components [Navigation Components] The basic function is to be able to display text and click interactively. After clarifying the task objectives, develop them.

Create a new Base directory under the component directory and create a new file under the base. Add the following code:

<template>
 <div class="topnav">
  {{title}}
 </div>
</template>
<script>
export default {
 name: 'topnav',
 props: ['title'],
 data: function () { return {
  text: 'Navigation Bar'
 } }
}
</script>

Add the following red part code to :

<template>
 <div class="about">
 <top-nav title="recommend"/>
 <HelloWorld msg="Links to vue official information"/>
 </div>
</template>
<script>
// @ is an alias to /src
import HelloWorld from '@/components/'
import TopNav from '@/components/Base/'
export default {
 name: 'home',
 components: {
 HelloWorld, TopNav
 }
}
</script>

Through the above two steps, the new component TopNav is introduced into . In fact, HelloWorld can also be reused.

What does the so-called reuse mean? as follows:

<top-nav title="Recommended"/>
<top-nav title="Military"/>
<top-nav title="Social"/>
<top-nav title="Technology"/>

This is what is called reuse. title is the content in the props property of . As can be seen above, props is an array, and each element in it is a [variable] that will be passed from the parent component. Yes, variables are understood this way.

The previous article mentioned global registration and local registration; this example is [local registration component]. Before turning it into a [global registered component], git push first.

OK, before changing [global], there is a question: What is the difference between global and local?

As you can see the above example, to use HelloWorld or TopNav, you must first import. For global, no import is needed.

Turn components into global components

Any module (understands components as modules at this time) cannot be used without import. Register components globally, just import in them, and then register them globally through the (params) function.

Therefore, global registration of components is not mysterious, add the following code:

import TopNav from '@components/Base/TopNav'
('TopNav', TopNav)

Notice:('TopNav', TopNav) Must be in new Vue({ router, store, render: h => h(App) }).$mount('#app') That is, it is defined before the root component is instantiated.

Then remove the introduction in :

<template><div class="about">
 <top-nav title="recommend"/>
 <top-nav title="military"/>
 <top-nav title="society"/>
 <top-nav title="science and technology"/>
 <HelloWorld msg="Links to vue official information"/>
</div></template>
<script>
// @ is an alias to /src
import HelloWorld from '@/components/'
// import TopNav from '@/components/Base/'
export default {
 name: 'home',
 components: {
 HelloWorld
 }
}
</script>

Run the code and you will find that there is no error.

This is global registration. There is still a problem. There are more basic components for large projects, which is not good-looking. The method described below can be solved by using only a few dozen lines of code.

First, two lodash modules are introduced:

import upperFirst from 'lodash/upperFirst'
import camelCase from 'lodash/camelCase'

All files containing the basic module can be found with the following code:

const requireComponent = (
 /* Find basic modules in the ./components/Base folder */
 './components/Base',
 /* Does subfolders include */
 true,
 /* Any files ending with .vue are basic modules */
 /[\w-]+\.vue$/
)

The next step is to traverse the module import:

/* Traversing this file collection - import - global registration */
().forEach(fileName => {
 /* Get component configuration */
 const componentConfig = requireComponent(fileName)
 /* Get component name from file name */
 const componentName = upperFirst(
 camelCase(
  fileName
  /* Remove the beginning "./_" */
  .replace(/^\.\/_/, '')
  /* Remove the suffix name of the file, that is, .vue */
  .replace(/\.\w+$/, '')
 )
 )
 /* Global Register Component */
 (componentName,  || componentConfig)
})

In this way, the *.vue component in the './components/Base' directory will be automatically introduced and registered as a global component.

==========================

This is the introduction to component reuse, and the relevant code has also been uploaded toGitHub.

Summarize

The above is the introduction tutorial on the reuse of vue3.0 CLI - 2.6 - components introduced to you by the editor. I hope it will be helpful to you. If you have any questions, please leave me a message and the editor will reply to you in time. Thank you very much for your support for my website!