<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <div_box :brand="msg1" :colleges="msg2"></div_box> <div id="home"> <span>首页</span> <div_box2 :brand="msg1" :colleges="msg2"></div_box2> </div> <div id="mine"> <span>我的</span> </div> </div> <template id="div_box"> <div> <p>{{brand}}</p> <ul> <li v-for="item in colleges">{{item}}</li> </ul> </div> </template> <template id="div_box2"> <div> <p>{{brand}}</p> <ul> <li v-for="item in colleges">{{item}}</li> </ul> </div> </template> <template id="div_box3"> <div> <p>{{brand}}</p> <ul> <li v-for="item in colleges">{{item}}</li> </ul> </div> </template> <script src="js/vue.3.2.2.js"></script> <script> const Box = { //用于接收数据 props:['brand','colleges'], template:'#div_box' } const Box2 = { //用于接收数据 props: { brand:String, colleges:Array }, template:'#div_box2' } const Box3 = { //用于接收数据 props: { brand:{type:String,required:true,default:"aaaaaaa"}, colleges:{type:Array,required:true} }, template:'#div_box3' } // 1、创建Vue的实例对象 const app = Vue.createApp({ data(){//定义数据 return { msg1:'你好！', msg2:['web','java','vue'] } }, components:{ 'div_box':Box, 'div_box2':Box2, 'div_box3':Box3 } }).mount('#app'); </script> </body> </html>