关键字:slot
插槽属于一个组件所以说用到了:
Vue.Component("xxx",{
})
具体代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>
</head>
<body>
<div id="aaa">
<todo>
<todo-title slot="todo-title" :title="title"></todo-title>
<todo-items slot="todo-items" v-for="item in todoItems" :item="item"></todo-items>
</todo>
</div>
<script>
Vue.component("todo",{
template:
'<div>'+
'<slot name="todo-title"></slot>'+
'<ul>'+
'<slot name="todo-items"></slot>'+
'</ul>'+
'</div>'
})
Vue.component("todo-title",{
props:['title'],
template:"<div>{{title}}</div>"
})
Vue.component("todo-items",{
props: ['item'],
template: "<li>{{item}}</li>"
})
var vm = new Vue({
el:"#aaa",
data:{
title:"张老师列表",
todoItems:["张文说java","张文说前端","张文说Linux"]
}
})
</script>
</body>
</html>
具体结果自己运行,增加自己动手能力!!!
个人注意点:
这里学到了一个新的知识那就是:‘‘:’’这个代表的就是v-bind
注意:template中必须用标签包裹起来 数组多个数据一定要遍历出来 代码中+号换行都可以用 “\” 代替