插槽可以使程序的大框架不变,为局部的改变提供插槽,可以把组件插入插槽,完成局部的变化,比如本例中的title和items组件插入对应的插槽。
<!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>
<h1>the Nst vue program</h1>
<div id="app">
<!-- 使用插槽 -->
<todo>
<!--v-bind:组件props=‘VM对象里的数据’-->
<todo-title slot="todo-title" v-bind:title="todoTitle"></todo-title>
<!-- 这样的v-for的todoIndex直接就表示下标 -->
<todo-items slot="todo-items" V-for="(item, todoIndex) in todoItems" :key="todoIndex" v-bind:item='item' v-bind:index='todoIndex'></todo-items>
</todo>
</div>
<script src="vue/vue.js"></script>
<script>
// solt是插槽,可以动态地插入数据
Vue.component("todo", {
template: '<div>\
<slot name="todo-title"></slot>\
<ul>\
<slot name="todo-items"></slot>\
</ul>\
</div>'
});
// 和todo-title插槽对接的组件
Vue.component("todo-title", {
props: ['title'],
template: '<div>{{title}}</div>'
});
// 和todo-items插槽对接的组件
Vue.component("todo-items", {
props: ['item', 'index'],
template: '<li>{{index}}.{{item}}</li>'
})
var vm = new Vue({
el: "#app", // el就是element的意思
data: { // 数据
todoItems: ['做饭','吃饭','洗碗'],
todoTitle: '备忘录'
}
});
</script>
</body>
</html>