<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <h1>{{msg}}</h1> <box2 :num1="a" :num2="b" :num3="c" :num4="d"></box2> <box2 v-bind="numObj"></box2> </div> <template id="button_counter"> <button @click="count++">点{{count}}次</button> </template> <template id="div_box2"> <p>num1:{{num1}}</p> <p>num2:{{num2}}</p> <p>num3:{{num3}}</p> <p>num4:{{num4}}</p> <div style="background-color: red">div_box2<button-counter></button-counter></div> </template> <script src="js/vue.3.2.2.js"></script> <script> //注册一个局部组件 const Counter={ data(){ return{ count: 0 } }, template:'#button_counter' } const Box={ props:{ total:Number, num1:String, num2:String, num3:String, num4:String }, data(){ return{ myTotal:this.total } }, components: { 'button-counter':Counter }, template:'#div_box2' } // 1、创建Vue的实例对象 const app = Vue.createApp({ data(){//定义数据 return { msg:'你好！', appCount:100, a:100, b:200, c:300, d:400, numObj:{ num1:100, num2:200, num3:300, num4:400 } } }, components:{ // 'button-counter':Counter, 'box2':Box } }).mount('#app'); </script> </body> </html>