Introduction to local components in Vue

Introduction to local components in Vue

In Vue, we can define (register) local components ourselves

To define a component name:

var ComponentA = { /* ... */ }

var ComponentB = { /* ... */ }

Then define the components you want to use in the components option:

new Vue({
  el: '#app',
 
// Component center components: {
 // When rendering a local registered component at the view layer // component-a: the name you want to use when calling at the view layer // ComponentA: Local registered component name 'component-a': ComponentA,
    'component-b': ComponentB
  }
})

Call the local component in the view layer:

<div id="app">
        <component-a></component-a>
        <component-b></component-b>
    </div>

For example:

<body>
    
    <div id="app">
        <component-a></component-a>
        <component-b></component-b>
    </div>
 
    <script src="./js/vue.js"></script>
    <script>
        let componentA = {
            template:`
                <p>I am a local component 1</p>
            `
        }
 
        let componentB = {
            template:`
                <p>I am a local component 2</p>
            `
        }
 
        let vm = new Vue({
            el:'#app',
            data:{
 
            },
            components:{
                "component-a":componentA,
                "component-b":componentB
            }
        })
    </script>

The output is:

You may also be interested in:
  • Vue local component data sharing Vue.observable() usage
  • Description of the difference between Vue global components and local components
  • VUE registration global components and local components process analysis
  • Vue component definition, global and local components, template and dynamic component function examples
  • In-depth analysis of the difference between Vue global components and local components
  • Detailed explanation of how to use Vue global components and local components
  • Detailed explanation of the use of global components and local components in Vue components
  • Detailed explanation of vue.js global components and local components

<<:  Perfect solution to Google Chrome autofill problem

>>:  Textarea tag in HTML

Recommend

Pure CSS to achieve horizontal line animation under the element (background-image)

Effect picture: html: <div class='site_bar...

Linux bridge method steps to bridge two VirtualBox virtual networks

This article originated from my complaints about ...

svg+css or js to create tick animation effect

Previously, my boss asked me to make a program th...

Vue uses Canvas to generate random sized and non-overlapping circles

Table of contents Canvas related documents Effect...

Implementing carousel with native JavaScript

This article shares the specific code for impleme...

WeChat applet development realizes the home page pop-up box activity guidance function

Table of contents 1. Demand 2. Database Design 3....

Difference and principle analysis of Nginx forward and reverse proxy

1. The difference between forward proxy and rever...

Optimizing JavaScript and CSS to improve website performance

<br /> In the first and second parts, we int...

MySQL table return causes index invalidation case explanation

Introduction When the MySQL InnoDB engine queries...

Data constraint examples based on MySQL database and introduction to five integrity constraints

In order to prevent non-compliant data from enter...

Detailed explanation of the mysql database LIKE operator in python

The LIKE operator is used in the WHERE clause to ...

How to disable foreign key constraint checking in MySQL child tables

Prepare: Define a teacher table and a student tab...

Solution to the MySQL error "Every derived table must have its own alias"

MySQL reports an error when executing multi-table...

Summary of related functions for Mysql query JSON results

The JSON format field is a new attribute added in...

mysql 5.7.20 win64 installation and configuration method

mysql-5.7.20-winx64.zipInstallation package witho...