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

This article mainly shows you "vue how to achieve global component registration", 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 "vue how to achieve global component registration" this article.

Global component registration

1 general situation

Scenarios where you need to use components:

Import BaseButton from'. / baseButton' import BaseIcon from'. / baseIcon' import BaseInput from'. / baseInput' export default {components: {BaseButton, BaseIcon, BaseInput}}

We've written a bunch of basic UI components, and every time we need to use these components, we have to import them first, and then declare components, which is tedious, and we can use unified registration here.

2 optimization

We need to use the artifact webpack and use the require.context () method to create our own module context to implement automatic dynamic require components. This method requires three parameters: the folder directory to be searched, whether its subdirectories should also be searched, and a regular expression that matches the file. We add a file called componentRegister.js in the components folder, where webpack dynamically packages all the basic components we need. / src/components/componentRegister.js

Import Vue from 'vue'/** * capital * @ param str string * @ example heheHaha * @ return {string} HeheHaha * / function capitalizeFirstLetter (str) {return str.charAt (0). ToUpperCase () + str.slice (1)} / * * take the component name * @ param str fileName * @ example abc/bcd/def/basicTable.vue * @ return {for components that conform to the' xx/xx.vue' component format String} BasicTable * / function validateFileName (str) {return / ^\ S+\ .vue $/ .test (str) & & str.replace (/ ^\ S+\ / (\ w+)\ .vue$/ (rs, $1) = > capitalizeFirstLetter ($1)} const requireComponent = require.context ('. /', true, /\ .vue $/) / / find the file named .vue under the component folder If the file name is index, then take the name in the component as the registered component name requireComponent.keys () .forEach (filePath = > {const componentConfig = requireComponent (filePath) const fileName = validateFileName (filePath) const componentName = fileName.toLowerCase () = = 'index'? CapitalizeFirstLetter (componentConfig.default.name): fileName Vue.component (componentName, componentConfig.default | | componentConfig)})

Here is the folder structure:

Components │ componentRegister.js ├─ BasicTable │ BasicTable.vue ├─ MultiCondition │ index.vue

The component name is judged here. If it is index, the name attribute in the component is taken and processed as the registered component name, so the final registered components are: multi-condition, basic-table, and finally we import 'components/componentRegister.js', in main.js, and then we can use these basic components anytime, anywhere, without the need to manually introduce ~

The above is all the contents of the article "how to achieve global component registration in vue". 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.