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

This article mainly introduces "how to encapsulate an automatic registration global component in Vue". In daily operation, I believe that many people have doubts about how to encapsulate an automatic registration global component in Vue. Xiaobian consulted all kinds of materials and sorted out simple and easy-to-use operation methods. I hope it will be helpful to answer the doubt of "how to encapsulate an automatic registration global component in Vue". Next, please follow the editor to study!

In the process of project development, we often encapsulate some commonly used global components, but every time we add a component, we need to manually introduce registration in main.js, which is not only troublesome but also a lot of code, which is really annoying. So simply encapsulate an automated registration global component.

1. Customize the global components folder

Create a new globalComponents under src to store global components, and create a new component, such as Orange

2. Component auto-registration configuration file

Create an index.js in globalComponents to find all components and register automatically

/ / automatically register global components. Each new component must recompile import Vue from 'vue'const requireComponent = require.context ('. / globalComponents', / / the relative path to its component directory true, / / whether to query its subdirectory /\ .vue $/ to match the regular expression of the underlying component filename) requireComponent.keys () .forEach (fileName = > {const componentConfig = requireComponent (fileName)) / / get component configuration / * compatible with both import export and require module.export specifications * / / if this component option is exported through export default, .default const comp = componentConfig.default will be preferred | | componentConfig; Vue.component (comp.name, comp) / / where name is the name defined by the component attribute})

3. Edit Orange/index.vue

The most important thing for a component is the name defined by the component property (name is the auto-registered component name)

Orange export default {name: 'Orange', / / the name attribute value here will be the component name used later, and unique components: {}, props: {}, data () {return {}}, created () {}, mounted () {}, methods: {}} are required

4. Import globalComponents/index.js into the entry file main.js

/ / main.jsimport Vue from 'vue'// automatically registers the global component import'. / globalComponents/index.js'

Basically complete the above steps, and then you can use this global component directly.

How to use it:

At this point, the study on "how to encapsulate an automated registration global component in Vue" is over. I hope to be able to solve everyone's doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

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.