<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<div_box>aaa</div_box>
</br>
<div_box2>
<template v-slot:header>
<h1>header</h1>
</template>
<template v-slot:content>
<h2>main</h2>
</template>
<template v-slot:footer>
<h3>footer</h3>
</template>
<template v-slot:default>
<h4>default</h4>
</template>
</div_box2>
</br>
<div_box3 v-show="isShow"><!-- 使用app中的isShow -->
<template v-slot:default="slotProps">
<span>{{slotProps.data.join("-----;")}}</span>
</template>
</div_box3>
</br>
</div>
<template id="div_box">
<div style="background-color: red;height: 200px;height: 200px;">
<button @click="btnClick">btn</button>
<slot></slot><!-- 插槽写入调者的html -->
</div>
</template>
<template id="div_box2">
<div style="background-color: red;height: 200px;height: 200px;">
<header>
<slot name="header">header</slot>
</header>
<main>
<slot name="content">main</slot>
</main>
<footer>
<slot name="footer">footer</slot>
</footer>
</div>
</template>
<template id="div_box3">
<div style="background-color: red;height: 200px;height: 200px;">
<slot :data="nameArr">
<ul>
<li v-for="name in nameArr">{{name}}</li>
</ul>
</slot>
</div>
</template>
<script src="js/vue.3.2.2.js"></script>
<script>
const Box = {
//用于接收数据
// props:['brand','colleges'],
template:'#div_box',
methods:{
btnClick(){
console.log("btnClick");
// this.$emit('div_box_click','test_msg1','test_msg2','test_msg3');
const args = {
name:'subject',
intro:'java,vue'
}
this.$emit('div_box_click',args);
}
}
}
const Box2 = {
//用于接收数据
// props:['brand','colleges'],
template:'#div_box2',
methods:{
}
}
const Box3 = {
data(){
return{
isShow:false,
nameArr:["张三","李四"]
}
},
//用于接收数据
// props:['brand','colleges'],
template:'#div_box3',
methods:{
}
}
// 1、创建Vue的实例对象
const app = Vue.createApp({
data(){//定义数据
return {
msg:'你好！',
isShow: true
}
},
components:{
'div_box':Box,
'div_box2':Box2,
'div_box3':Box3
}
}).mount('#app');
</script>
</body>
</html>