<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <!-- 调用全局注册的组件 --> <button-counter></button-counter> <p>----------------------</p> <buttonCounter></buttonCounter> <box1></box1> <button-counter></button-counter> </div> <p>======================</p> <div id="root"> <button-counter></button-counter> <box2></box2> </div> <script src="js/vue.3.2.2.js"></script> <script> //注册一个局部组件 const Counter={ data(){ return{ count: 0 } }, template:'<button @click="count++">点{{count}}次</button>' } const Box={ components: { 'button-counter':Counter }, template:'<div style="background-color: red">' + 'div_box2' + '<button-counter></button-counter>' + '</div>' } // 1、创建Vue的实例对象 const app = Vue.createApp({ data(){//定义数据 return { msg:'你好！' } } }); const root = Vue.createApp({ data(){//定义数据 return { msg:'你好2！' } }, components:{ 'button-counter':Counter, 'box2':Box } }); <!-- 建议使用这种 --> app.component('button-counter',{ data(){ return{ count: 0 } }, template:'<button @click="count++">点击{{count}}次</button>' }); <!-- 这种只有脚手架工程开发时才有效 --> app.component('buttonCounter',{ data(){ return{ count2: 0 } }, template:'<button @click="count2++">点击{{count2}}次</button>' }); app.component('box1',{ template:'<div style="background-color: red">' + 'div_box1' + '<button-counter></button-counter>' + '</div>' }); app.mount('#app'); root.mount('#root'); </script> </body> </html>