<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, Initial - scale = 1.0 "> < title > define components < / title > < script SRC =" https://cdn.jsdelivr.net/npm/vue/dist/vue.js "> < / script > < / head > <body> <div id="app"> <hello></hello> <my-world></my-world> <! - < myWorld > < / myWorld > -- > < / div > < script > / / way 1: Var mycom = vue.extend ({template: '<h2>hello word</h2>'}); var mycom = vue.extend ({template: '<h2>hello word</h2>'}); // 2. Vue.component('hello', mycom); Vue.component('my-world', {template: '<h2> world, hello </h2>'}); Var vm = new Vue({// vm = new Vue, data: {MSG: 'la la la'}}); </script> </body> </html>Copy the code<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, Initial - scale = 1.0 "> < title > component classification of global components, local component < / title > < script SRC =" https://cdn.jsdelivr.net/npm/vue/dist/vue.js "> < / script > </head> <body> <div id="itapp"> <my-hello></my-hello> <my-world></my-world> </div> <div id="app"> {{name}} <my-hello></my-hello> <! -- <my-world></my-world> --> </div> <script> // global components can use Vue.component('my-hello',{ Template :'<h2> I am global </h2>', data(){// When storing data in a component, it must be in the form of a function, which returns an object {name:'laney'}}}); */ var vm=new vue ({// vm here is also a component, }, components:{'my-world':{template:'<h2> Hello {{age}} < / h2 > ', the data () {return {age: '20'}}}}}); New Vue({// vm here is also a component called Root component Root el:'#app', data:{name:' Tom '}}) </script> </body> </ HTML >Copy the code<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, Initial - scale = 1.0 "> < title > dynamic component < / title > < script SRC =" https://cdn.jsdelivr.net/npm/vue/dist/vue.js "> < / script > < / head > <body> <div id="app"> < button@click ="flag='my-hello'"> Display hello component </button> <button @click="flag='my-world'"> --> <keep-alive> < Component :is="flag"></component> </keep-alive> <! -- <my-world></my-world> --> </div> <template id="wbs"> <div> <h3>{{msg}}</h3> {{time}} <ul> <li v-for="(item,index) in Arr ":key="index">{{item}}</li> </ul> </div> </template> <script> var vm=new Vue }, components:{'my-world':{name:' WBSX ', template:'# WBS ', data(){ return { age:'20', msg:'world', arr:['tom','jack','laney'], time:Math.random() } } }, 'my - hello: {template:' < h2 > I am my hello {{time}} < / h2 > ', the data () {return {time: Math. The random ()}}}}}); </script> </body> </html>Copy the code