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

This article will explain in detail the example analysis of component metadata in vue. The editor thinks it is very practical, so I share it with you for reference. I hope you can get something after reading this article.

Component metadata

Not every piece of information you add to the component is status. Sometimes you need to add some metadata to provide more information for other components.

For example, if you want to build a bunch of different widgets for analytical dashboards such as Google Analytics:

If you want the layout to know how many columns each widget should occupy, you can add it directly to the component as metadata:

Export default {name: 'LiveUsersWidget', / /? Just add it as additional attributes columns: 3, props: {/ /...}, data () {return {/ /...};},}

You will find that this metadata is an attribute on the component:

Import LiveUsersWidget from'. / LiveUsersWidget.vue';const {columns} = LiveUsersWidget

You can also access metadata from within the component through the special $options property:

Export default {name: 'LiveUsersWidget', columns: 3, created () {/? `$options` contains all the metadata of the component console.log (`Using ${this.$options.metadata} columns`);},}

Keep in mind that this metadata is the same for each instance of the component and is not responsive.

Other uses include, but are not limited to:

Keep the version number of each component

Custom flags used to build tools to treat components differently

Add custom functions to components that go beyond computing props, data, observers, and so on.

This is the end of this article on "sample analysis of component metadata in vue". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, please share it for more people to see.

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.