Components of local and global components assembly

Objectives: The page is divided into several functional blocks, then combined in order to achieve better code reuse,

Vue components of thought: independent, reusable. Any application will be abstracted into a tree assembly; tree

It is divided into three components used in step

1 Create the component constructor

Vue.extend({})

2 registered components

Vue.conponent

3 using components

In the range of examples Vue

<! DOCTYPE HTML> 
<HTML lang = "EN"> 
<head> 
    <Meta charset = "UTF-. 8"> 
    <title> the Title </ title> 
<head /> 
<div ID = "App"> 
    <My-CPN > </ my-cpn> < -! using a custom component name -> 
</ div> 
<body> 

<Script src = "vue.js"> </ Script> 
<Script> 

// create a component 1 constructor object 
    const = Vue.extend CPN ({ 
        Template: '<div> <H2> The title I </ h2> <p> I SUMMARY </ p> <p> I Anhui </ p> </ div > ' 
    }); 


// 2 registration assembly (custom label name, the component constructor); 
    Vue.component ( "My-CPN", CPN); 
//. 3 must be used within the scope of assembly 
    const app = new VUE ({ 
        EL:'#app', 
        Data: { 
        } 
    }) 
</ Script> 
</ body> 
</ HTML> 

Global component and the local component

<! DOCTYPE HTML> 
<HTML lang = "EN"> 
<head> 
    <Meta charset = "UTF-. 8"> 
    <title> the Title </ title> 
</ head> 
<div ID = "App"> 
    <mycpn> < / mycpn> <-! using a custom component name -> 
    <mycpn> </ mycpn> <-! using a custom component name -> 
    <mycpn> </ mycpn> <-! use custom the component name -> 
</ div> 
<body> 

<Script the src = "vue.js"> </ Script> 
<Script> 

// constructor. 1 to create a component object 
    const = Vue.extend CPN ({ 
        Template: ' <div> <h2> I'm heading </ h2> <p> I am content </ p> <p> I'm Anhui </ the p-> </ div> ' 
    });


2 // registration assembly (global components, used in the examples means that a plurality of Vue) (defined names, component); 
// in the example of the registration of a Vue, the resulting assembly is partially 
// Vue.component ( "My-CPN", CPN); 

    const = new new App Vue ({ 
        EL: '# App', 
        Data: {
        }, 
        Components: { 
        // CPN is a label name using components 
            mycpn: CPN 
        } 
    }) 
</ Script> 
</ body> 
</ HTML>

Components of local and global components assembly

Guess you like