Home Web Front-end JS Tutorial How to create components in Vue

How to create components in Vue

Jun 05, 2018 am 09:45 AM
create how components

What are the methods for creating components in Vue? Below I will share with you a summary of two methods of creating components in Vue. It has a good reference value and I hope it will be helpful to everyone.

Summary of two methods of creating components

1. Global registration

2. Local registration

1

2

var child=Vue.extend({})

var parent=Vue.extend({})

Copy after login

Vue.extend() global method generates a constructor and creates a subclass

Use the basic Vue constructor to create a "subclass".

Writing like this is very cumbersome. So vue was simplified

Use Vue.component() to directly create and register components:

Vue.component(id,options) global method is used to register global components

id is a string type, which is the name of the registered component

options is an object

1

2

3

4

5

6

7

// 全局注册,my-component1是标签名称

Vue.component('my-component1',{

 template: &#39;<p>This is the first component!</p>&#39;

})

var vm1 = new Vue({

 el: &#39;#app1&#39;

})

Copy after login

Vue.component() The first parameter is the label name, and the second parameter is an options object. Use the template attribute of the option object to define the component template.

Using this method, Vue will automatically call Vue.extend() behind the scenes.

Implement local registration in the components attribute of the option object:

1

2

3

4

5

6

7

8

9

10

11

12

13

var vm2 = new Vue({

 el: &#39;#app2&#39;,

 components: {

  // 局部注册,my-component2是标签名称

  &#39;my-component2&#39;: {

   template: &#39;<p>This is the second component!</p>&#39;

  },

  // 局部注册,my-component3是标签名称

  &#39;my-component3&#39;: {

   template: &#39;<p>This is the third component!</p>&#39;

  }

 }

})

Copy after login

==Local registration is placed in the option Created in the object==

Note: Here are components, multiple components can be defined in it.

The simplified writing method is like this

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

<body>

 <p id=&#39;box&#39;> 

  <parent> 

  </parent>

 </p>

 <script src=&#39;js/vue.js&#39;></script>

 <script>

  Vue.component(&#39;parent&#39;,{

   template:`<p><h1>我是父组件</h1><child></child></p>`,

    components:{

    &#39;child&#39;:{

     template:`<h1>我是子组件</h1>`

    }

   }

  })

  new Vue({

   el:&#39;#box&#39;

  })

 </script>

</body>

Copy after login

Register a parent Parent component. Then register a child subcomponent in the options object of the parent component. Write the tag of the child component into the template of the parent component.

The style structure on the page is

1

2

3

4

<p>

 <h1>我是父组件</h1>

 <h1>我是子组件</h1>

</p>

Copy after login

Note: Subcomponents registered locally cannot be used alone Use directly!

If the tag is hung in p, an error will be reported

1

2

3

<p id=&#39;box&#39;> 

 <child></child>

</p>

Copy after login

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

How to define your own select component based on ng-alain in angular?

How to implement watch monitoring objects and corresponding value changes in vue

How to solve the problem that Vue cannot detect arrays or Problems with object changes?

The above is the detailed content of How to create components in Vue. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Hot Topics

Java Tutorial
1659
14
PHP Tutorial
1258
29
C# Tutorial
1232
24
How to install the Windows 10 old version component DirectPlay How to install the Windows 10 old version component DirectPlay Dec 28, 2023 pm 03:43 PM

Many users always encounter some problems when playing some games on win10, such as screen freezes and blurred screens. At this time, we can solve the problem by turning on the directplay function, and the operation method of the function is also Very simple. How to install directplay, the old component of win10 1. Enter "Control Panel" in the search box and open it 2. Select large icons as the viewing method 3. Find "Programs and Features" 4. Click on the left to enable or turn off win functions 5. Select the old version here Just check the box

How to create a folder on Realme Phone? How to create a folder on Realme Phone? Mar 23, 2024 pm 02:30 PM

Title: Realme Phone Beginner’s Guide: How to Create Folders on Realme Phone? In today's society, mobile phones have become an indispensable tool in people's lives. As a popular smartphone brand, Realme Phone is loved by users for its simple and practical operating system. In the process of using Realme phones, many people may encounter situations where they need to organize files and applications on their phones, and creating folders is an effective way. This article will introduce how to create folders on Realme phones to help users better manage their phone content. No.

How to create pixel art in GIMP How to create pixel art in GIMP Feb 19, 2024 pm 03:24 PM

This article will interest you if you are interested in using GIMP for pixel art creation on Windows. GIMP is a well-known graphics editing software that is not only free and open source, but also helps users create beautiful images and designs easily. In addition to being suitable for beginners and professional designers alike, GIMP can also be used to create pixel art, a form of digital art that utilizes pixels as the only building blocks for drawing and creating. How to Create Pixel Art in GIMP Here are the main steps to create pixel pictures using GIMP on a Windows PC: Download and install GIMP, then launch the application. Create a new image. Resize width and height. Select the pencil tool. Set the brush type to pixels. set up

How to create a family with Gree+ How to create a family with Gree+ Mar 01, 2024 pm 12:40 PM

Many friends expressed that they want to know how to create a family in Gree+ software. Here is the operation method for you. Friends who want to know more, come and take a look with me. First, open the Gree+ software on your mobile phone and log in. Then, in the options bar at the bottom of the page, click the "My" option on the far right to enter the personal account page. 2. After coming to my page, there is a "Create Family" option under "Family". After finding it, click on it to enter. 3. Next jump to the page to create a family, enter the family name to be set in the input box according to the prompts, and click the "Save" button in the upper right corner after entering it. 4. Finally, a "save successfully" prompt will pop up at the bottom of the page, indicating that the family has been successfully created.

How to create a Gantt chart using Highcharts How to create a Gantt chart using Highcharts Dec 17, 2023 pm 07:23 PM

How to use Highcharts to create a Gantt chart requires specific code examples. Introduction: The Gantt chart is a chart form commonly used to display project progress and time management. It can visually display the start time, end time and progress of the task. Highcharts is a powerful JavaScript chart library that provides rich chart types and flexible configuration options. This article will introduce how to use Highcharts to create a Gantt chart and give specific code examples. 1. Highchart

How to Create a Contact Poster for Your iPhone How to Create a Contact Poster for Your iPhone Mar 02, 2024 am 11:30 AM

In iOS17, Apple has added a contact poster feature to its commonly used Phone and Contacts apps. This feature allows users to set personalized posters for each contact, making the address book more visual and personal. Contact posters can help users identify and locate specific contacts more quickly, improving user experience. Through this feature, users can add specific pictures or logos to each contact according to their preferences and needs, making the address book interface more vivid. Apple in iOS17 provides iPhone users with a novel way to express themselves, and added a personalizable contact poster. The Contact Poster feature allows you to display unique, personalized content when calling other iPhone users. you

A first look at Django: Create your first Django project using the command line A first look at Django: Create your first Django project using the command line Feb 19, 2024 am 09:56 AM

Start the journey of Django project: start from the command line and create your first Django project. Django is a powerful and flexible web application framework. It is based on Python and provides many tools and functions needed to develop web applications. This article will lead you to create your first Django project starting from the command line. Before starting, make sure you have Python and Django installed. Step 1: Create the project directory First, open the command line window and create a new directory

How to open the settings of the old version of win10 components How to open the settings of the old version of win10 components Dec 22, 2023 am 08:45 AM

Win10 old version components need to be turned on by users themselves in the settings, because many components are usually closed by default. First we need to enter the settings. The operation is very simple. Just follow the steps below. Where are the win10 old version components? Open 1. Click Start, then click "Win System" 2. Click to enter the Control Panel 3. Then click the program below 4. Click "Enable or turn off Win functions" 5. Here you can choose what you want to open

See all articles