<body> <div id="app"> <cpn1></cpn1> <cpn2></cpn2> </div> <script src='https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js'></script> <script> // 组件的语法糖注册方式如下:直接注册组件 把第二个参数的内容传进来 Vue.component('cpn1', { template: ` <div> <h1>那年夏天</h1> <p>空气很甜 lalallallal</p> </div> ` }) const app = new Vue({ el: '#app', data: { }, components: { cpn2: { // 组件局部的语法糖 template: ` <div> <h1>即使知道这个世界很灰暗</h1> <h3>但是还是相信 光会透过裂缝 钻进来</h3> </div> ` } } }) </script> </body>