How to register a component using vue

This time I will show you how to use vue to register components. What are theprecautions for using vue to register components?. The following is a practical case, let's take a look.

1. Introduction

The component system is one of the important concepts of Vue.js. It provides an abstraction that we can use Independent and reusable small components are used to build large-scale applications. Any type of application interface can be abstracted into a component tree

So what are components?

Components can extendHTML elementsand encapsulate reusable HTML code. We can think of components as custom HTML elements.

2. How to register a component

The use ofcomponents of Vue.jsThere are 3 steps: Create a component structure controller, register components and use components.

The following code demonstrates these three steps

The running results are as follows:

1. Global registration and local registration

When calling Vue.component() to register a component, the component's registration is global, which means that the component can be used in any Vue example.
If you do not need global registration, or if you want the component to be used in other components, you can use the components attribute of the options object to implement local registration.

My own understanding is that components represent global components, and components represent local components.

The above example can be changed to local registration:

Since my-component The component is registered under the Vue instance corresponding to the #app element, so it cannot be used under other Vue instances.

2. Component registration syntax sugar

The above component registration method is a bit cumbersome. In order to simplify this process, Vue.js provides registration Syntax sugar

// 全局注册，my-component1是标签名称 Vue.component('my-component1',{ template: '
This is the first component!
' }) var vm1 = new Vue({ el: '#app1' })

The first parameter of Vue.component() is the label name, and the second parameter is an option object. Use the template attributeof the option object to define the componenttemplate.
Using this method, Vue will automatically call Vue.extend() behind the scenes.

Components implement local registration

var vm2 = new Vue({ el: '#app2', components: { // 局部注册，my-component2是标签名称 'my-component2': { template: '
This is the second component!
' }, // 局部注册，my-component3是标签名称 'my-component3': { template: '
This is the third component!
' } } }

3. Parent component and child component

We can define and use other components in the component, which constitutes The relationship between parent and child components.

The running result of this code is as follows

4. Use script or template tag

Although the syntax Sugar simplifies component registration, but splicing HTML elements in the template option is more troublesome, which also leads to high coupling between HTML andJavaScript.
Fortunately, Vue.js provides two ways to separate HTML templates defined in JavaScript.

Running results:

Note: When using the