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