//? template:中写slot标签里面就是对应会被替换的内容，name属性值表示它的命名，后面的属性有点像父传子的写法，它可以将name后面的属性以及属性值存在上面template标签?#subtitle="scope"，这个scope里面，相当于一个对象了，scope自己命名
//上面的template标签里面嵌套的内容就是新的内容了
<!DOCTYPE html>
<html lang="en">
<head>
? <meta charset="UTF-8">
? <meta name="viewport" content="width=device-width, initial-scale=1.0">
? <title>Document</title>
</head>
<body>
? <div id="app">
? ? App
? ? <todo-header>
? ? ? <template #default>
? ? ? ? <span><a href="#">子标题链接</a></span>
? ? ? </template>
? ? ? <template v-slot:title="scope">
? ? ? ? <span>{{ scope }}</span>
? ? ? ? <h3>{{ scope.title }}</h3>
? ? ? </template>
? ? ? <template #subtitle="scope">
? ? ? ? {{ scope.subtitle }}
? ? ? ? <h4>今日事, 今日毕!!!</h4>
? ? ? </template>
? ? </todo-header>
? </div>
? <script src="./lib/vue.global.js"></script>
? <script>
? ? const todoHeader = {
? ? ? template: `
? ? ? ? <div class="header">
? ? ? ? ? <slot name="title" title="待办事项列表" username="admin" password="123456">
? ? ? ? ? ? <div class="title">待办事项列表</div>
? ? ? ? ? </slot>
? ? ? ? ? <slot name="subtitle" subtitle="ToDoList...">
? ? ? ? ? ? <div class="subtitle">ToDoList...</div>
? ? ? ? ? </slot>
? ? ? ? ??
?? ??? ? ?<slot>
? ? ? ? ? ? <div>子标题的链接地址</div>
? ? ? ? ? </slot>
? ? ? ? </div>
? ? ? `,
? ? }
? ? const app = Vue.createApp({})
? ? app.component('todo-header', todoHeader)
? ? app.mount('#app')
? </script>
</body>
</html>