根组件的模板，使用子组件
<demo />，并传不同的html，分开传，把标签包在template里面,html的命名也写在template里面
不同的html有不同的名字
v-slot:这里的v-slot：可以简写成#
子组件里面用slot来接收父组件传的html,但是要分开接收
<slot name=""></slot>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="root"></div>
</body>
<script>
// 跟组件，用子组件，并向子组件传不同的html代码
const app = Vue.createApp({
// 变量
// 逻辑
// 模板，使用子组件<demo />，并传不同的html，分开传，把标签包在template里面,html的命名也写在template里面
// 不同的html有不同的名字v-slot: 这里的v-slot： 可以简写成#
template: `
<demo>
<template v-slot:header>
<header>我是header</header>
</template>
<template #footer>
<footer>我是footer</footer>
</template>
</demo>
`,
});
// 子组件
app.component("demo", {
// 子组件里面用slot来接收父组件传的html,但是要分开接收
// <slot name=""></slot>
template: `
<slot name="header"></slot>
<section>我是section</section>
<slot name="footer"></slot>
`,
});
// 绑定渲染
const vm = app.mount("#root");
</script>
</html>
