Global components
All instances can use global components.
Html
<!DOCTYPE HTML><HTML><Head><MetaCharSet= "Utf-8"><title>Vue Test Example-Rookie tutorial (runoob.com)</title><Scriptsrc= "Https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></Script></Head><Body><DivID= "App"> <Runoob></Runoob></Div><Script>//RegisterVue.component ('Runoob', {Template:''})//creating the root instanceNewVue ({el:'#app'})</Script></Body></HTML>
The effect shows the HTML content of the custom component.
Local components
We can also register the local component in the instance option so that the component can only be used in this instance:
Html
<!DOCTYPE HTML><HTML><Head><MetaCharSet= "Utf-8"><title>Vue Test Example-Rookie tutorial (runoob.com)</title><Scriptsrc= "Https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></Script></Head><Body><DivID= "App"> <Runoob></Runoob></Div><Script>var Child={Template:''}//creating the root instanceNewVue ({el:'#app', components: {//<runoob> will be available only in parent templates 'Runoob': Child}})</Script></Body></HTML>
The same effect is also output HTML content.
Global components and local components of the Vuejs component