Vue component 父子组件通信 props

<!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>