vue插槽
插槽是用来传递复杂的内容，类似方法
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head> <body>
<div class="app">
<todo-list>
<todo-item v-for="item in classList" :title="item.title" :prize="item.prize">
<!--分发内容，类似java里面的aop吧
//2.5版本以后的插槽用法-->
<template v-slot:pre-icon>
<span>前置插槽</span>
</template>
<!--2.5版本之前用法-->
<span slot="suf-icon">后置插槽</span>
</todo-item>
</todo-list>
</div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
Vue.component('todo-item', {
props: {
title: String,
prize: {
type: Number,
default: 40
},
},
//默认插槽
template: `<li>
<slot name="pre-icon"></slot>
<button>删除</button>
课程名:{{title}}
价格:{{prize}}
<slot name="suf-icon"></slot>
<slot><span>默认插槽</span></slot>
</li>`,
data: function () {
return { }
},
methods: {
}
})
Vue.component('todo-list', {
template: `
<ul>
<slot ></slot>
</ul>
`, data: function () {
return { }
}
})
var vm = new Vue({
el: '.app',
data: {
message: 'hello world',
showMessage: false,
title: "是否删除",
classList: [
{
title: '课程1',
prize: 50 },
{
title: '课程2',
prize: 80
}
]
},
methods:{
},
})
</script>
</body> </html>
