<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><div id="app"> <mycpn1></mycpn1><!--使用自定义的组件名称--> <mycpn1></mycpn1><!--使用自定义的组件名称--> <mycpn1></mycpn1><!--使用自定义的组件名称--></div><body><!--<!–1 script标签，注意类型必须是:text/x-template–>--><!--<script type="text/x-template" id="cpn">--><!-- <div><h2>我是标题1</h2><p>我是内容</p><p>我是安徽</p></div>--><!--</script>--><!--2template标签--><template id="cpn1"> <div> <h2>{{title}}</h2> <!--组件内部不能访问实例里的数据，Vue组件应该有自己保存数据的地方--> <p>我是内容</p><p>我是安徽</p> </div></template><script src="vue.js"></script><script> //全局注册的语法糖的实现 Vue.component("mycpn1",{ template:'#cpn1', // 组件的数据不能是对象类型，而应该是函数类型，从而返回实例的值 //在组件当中，组件的对象有data属性，methods等属性， // 只是data 必须是一个函数 //而且这个函数必须要返回一个对象，对象内部保存着数据。 data(){ return { title:'abc' } } }); const app=new Vue({ /*看成root组件*/ el:'#app', })</script></body></html>
来源：https://www.cnblogs.com/Damocless/p/11913998.html