今天大致了解些vue插槽。在Vue.js中，插槽（slot）是一种机制，它允许你将内容插入到组件的特定位置。使用插槽，你可以在组件内定义一些可以被填充的占位符，然后在使用该组件时，将具体的内容插入到这些占位符中。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<todo>
<todo-title slot="todo-title" v-bind:title="title"></todo-title>
<todo-nie slot="todo-nie" v-for="item in items" v-bind:item="item" ></todo-nie>
</todo>
</div>
<!--导入Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
<script>
Vue.component("todo",
{
template: '<div>\<slot name="todo-title"></slot>\<ul>\<slot name="todo-nie"></slot>\</ul>\</div>'
})
Vue.component("todo-title",
{
props: ['title'],
template: '<div>{{title}}</div>'
})
Vue.component("todo-nie",
{
props: ['item'],
template: '<li>{{item}}</li>'
})
// 创建一个新的 Vue 实例
var vm = new Vue({
el: '#app',
data: {
items: ['带土', '爱', '琳'],
title: '标题'
}
});
</script>
</body>
</html>
标签：slot,vue,title,插槽,Vue,template,todo From： https://www.cnblogs.com/daitu66/p/17534997.html