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

This article will explain in detail what you need to pay attention to about vue components. The editor thinks it is very practical, so I share it for you as a reference. I hope you can get something after reading this article.

Vue components should pay attention to: 1, the template template of the component must have and only one root node; 2, the data option of the component must be a function, and the function body must return an object; 3, child components can not directly modify the value passed by the parent component, otherwise there will be a warning.

The operating environment of this tutorial: windows7 system, vue2.9.6 version, DELL G3 computer.

Considerations of Vue componentization

Components can be understood as special Vue instances that manage their own template templates.

The template of a component must have one and only one root node.

The data option for a component must be a function and the function body returns an object.

Child components cannot directly modify the values passed by the parent component.

The parent component can pass values to the child component at will through the situation of the property, but the child component cannot modify the data of the parent component; otherwise, there will be a warning not to directly modify the value passed by the parent component.

Components are independent of each other, and you can configure some of your own option resources data, methods, computed, and so on.

Idea: components manage themselves without affecting others.

Component example

Global Registration-Wang Jiawei / / Global Registration component / * 1. Component naming: hump, horizontal line separator naming method * 2. Using components: when using components, you must use horizontal delimiters to reference * * components can be understood as special Vue instances that do not need to be instantiated manually, and are used to manage their own templates. * / Vue.component ('component-a', {/ / template option, specify the template code of the component template:' header component-- {{name}}', data: function () {/ / in the component The data option must be a function return {name: 'global component'}) / / define the local component object const ComponentB = {template: 'this is {{name}}' Data () {return {name: 'local components'}},} new Vue ({el:'# app', components: {/ / key:value Key is the component name and value is the component object. 'component-b': ComponentB}, data: {}}) this is the end of the article on "what do you need to pay attention to in vue components". I hope the above content can be helpful 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.