<!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>
Vue component 父子组件通信 props