So what is a Vue component? It is one of the most powerful features of vue.js. It is an extensible HTML element that encapsulates reusable code, and it is also a Vue instance that accepts the same option objects (except for some root-specific options) and provides the same lifecycle hooks. I’m sure a lot of people understand that.

Component system is one of the important concepts in vue.js. It provides an abstraction that allows us to build large applications using independent reusable components. Any type of application interface can be abstracted into a component tree:

So what is a component? Components extend HTML elements and encapsulate reusable HTML code, and we can think of components as custom HTML elements.

What are the benefits of using components?

Improve development efficiency

Easy to reuse

Simplify debugging steps

Improve the maintainability of the entire project

Facilitate collaborative development of multiple people

How do I register a component?

You need to create a component using the vue. extend method and then register the component using the Vue.component method. The format of the vue. extend method is as follows

Var MyComponent = vue.extend ({// options... More on that later.Copy the code

If you want the created component to be used elsewhere, you have to give it a component name:

Vue.component('my-component', MyComponent)
Copy the code

After naming, you can use the component name in an HTML tag just as you would use a DOM element. Let’s look at a complete component registration and usage example.

// HTML code: <div id="example"<my-component></my-component> </div> var MyComponent = vue.extend ({template:'
      

       A custom component! 
      
'}) // Register for Vue.component('my-component', MyComponent) // Create root instance new Vue({el:'#example'
})
Copy the code

The output is:

<div id="example"> <div>A custom component! </div> </divCopy the code

Communication between components Parent components pass data to child components,

The child component needs to tell the parent what is happening inside it (using the subscription-to-publish model of events)

1. Bind an event (click) to the element on the template of the subcomponent, execute the subcomponent’s method (changeData), and emit an event (s) and pass a data (Lalala) in the subcomponent’s method;

2. In the parent component, define a method (such as getData) to getData from the child component.

3. Bind the event (s) passed by the sub-component to the user-defined component, and execute the event (S) to perform the getData function, which gets the data (data, which is the Lalala passed by the sub-component) data synchronization

<div id="app">
<parent></parent>
</div>
<template id="parent"< > < div > < h1 > parent component mark > {{MSG. Name}} < / mark > < / h1 > < children: n ="msg"></children>
</div>
</template>
<template id="children">
    <h2 @click="changeData"> child {{n.name}}</h2> </template> <script> // The core of data synchronization: the parent passes "reference data type" to the child; var app=new Vue({ el:'#app',
        components:{
            parent:{
                template:'#parent'.data() {return {msg:{name:'hahha'}}
                },
                components:{
                    children:{
                        props:['n'],
                        template:'#children',
                        methods:{
                            changeData(){
                                this.n.name='lallala'
                            },
                        }
                    }

                }
            }
        }
    })
</script>//
Copy the code

Data is not synchronized (do not directly use the value passed by the parent component, use the data property to create an intermediate variable in their own component, to prevent errors)

<parent></parent>
</div>
<template id="parent"< > < div > < h1 > parent component mark > {{MSG}} < / mark > < / h1 > < children: n ="msg"></children> </div> </template> <script> var app=new Vue({ el:'#app',
        components:{
            parent:{
                template:'#parent'.data() {return {msg:'hahha'}
                },
                components:{
                    children:{
                        props:['n'],
                        template:'
 subcomponent {{b}}
'.data() {return {b:this.n}
                        },
                        methods:{
                            changeData(){
                                this.b='lallala'},}}}}}})// Welcome to join the full stack development exchange group to learn exchange: 864305860 </script>Copy the code

Data in a component must be a function

Each component is independent of the other, and if they share an object,

When you change data from one component, it affects other components. If it’s a function,

Each component has its own independent data and does not affect each other.

Restricted elements

Vue doesn’t get the template content until the browser parses and standardizes the HTML, so some elements limit what can be wrapped around it.

For example, ul can only contain LI. Select can only contain options

Some elements have custom elements in them,

Does not conform to W3C standards and ends up parsing errors.

Parsing DOM templates

When using the DOM as a template (for example, mounting the EL option on an existing element), you are limited by HTML because Vue can’t get the template content until the browser parses and standardizes the HTML. Especially like these elements

    .
    It limits the elements that can be wrapped around it and some elements like this can only appear inside certain other elements. Using these restricted elements in custom components can cause problems, such as <table> <my-row>… </my-row> </table> Custom components are considered invalid content and therefore cause errors when rendering. Special is attributes should be used: <table> <tr is=”my-row”></tr> </table> That is, in standard HTML, certain elements can only be placed in certain child elements, and other elements can only be placed in certain parent elements. For example, table cannot have div, tr cannot have a parent element div, etc. So, when you use custom tags, the tag name is still the name of the tag, but you can fill in the name of the custom component in the TAG’s IS attribute. It should be noted that these restrictions do not apply if you use a string template from one of the following sources: