<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><div id="app"> <mycpn1></mycpn1><!--使用自定义的组件名称--> <mycpn2></mycpn2><!--使用自定义的组件名称--></div><body><script src="vue.js"></script><script> // 1创建一个组件构造器对象（子组件） // const cpn1=Vue.extend({ // template:'<div><h2>我是标题1</h2><p>我是内容</p><p>我是安徽</p></div>' // }); // 1创建第二个组件构造器对象（父组件） const cpn2=Vue.extend({ template:'<div><h2>我是标题2</h2><p>我是内容</p><p>我是安徽</p><mycpn1></mycpn1></div>', components:{ // mycpn1:cpn1 /*在某一个组件内部创建了另一个组件 只需要在Vue中实现2即可以同时实现1和2*/ } }); //2注册组件（全局组件，意味着可以在多个Vue的实例中使用） (自定义名字，组件)； //在某个Vue的实例下注册，得到的是局部组件 //全局注册的语法糖的实现 Vue.component("mycpn1",{ template:'<div><h2>我是标题1</h2><p>我是内容</p><p>我是安徽</p></div>' }); const app=new Vue({ /*看成root组件*/ el:'#app', data:{ }, components:{ // // cpn是使用组件是的标签名 // mycpn1: cpn1, /*不注册则会出错，需要考虑作用域问题*/ // mycpn2:cpn2 //注册局部变量的语法糖实现 mycpn2:{ template:'<div><h2>我是标题2</h2><p>我是内容</p><p>我是安徽</p></div>' } } })</script></body></html>
来源：https://www.cnblogs.com/Damocless/p/11913892.html