本文介绍了如何在Vue应用中使用模板和slot特性，展示了一个TodoHeader组件如何通过slot接收并显示自定义标题和子标题。
// 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>
扫一扫
2932
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
