文章目录
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id='app'>
{{message}} {{message + message}}
<div :id="message"></div>
<todo-list>
<template v-slot>
<todo-item @delete="handlerDelete" v-for="item in list" data-test="dd" :title="item.title" :del="item.del">
<template v-slot:pre-icon1="{value}">
<span>前置图标1 {{value}} </span>
</template>
<template v-slot:suf-icon1>
<span>后置图标1 </span>
</template>
<span slot="pre-icon2">前置图标2 </span>
</todo-item>
</template>
</todo-list>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script>
Vue.component('todo-item', {
props: {
title: String,
del: {
type: Boolean,
default: false
}
},
template: '' +
'<li>\n' +
'<slot name="pre-icon1" :value="value"></slot>' +
'<slot name="pre-icon2"></slot>' +
'<span v-if="del"> {{title}} </span>\n' +
'<span v-else style="text-decoration: line-through"> {{title}} </span>\n' +
'<slot name="suf-icon1"></slot>' +
'<slot name="suf-icon2">😄</slot>' +
'<button v-show="!del" @click.stop="handlerClick">删除</button>\n' +
'</li>',
data: function () {
return {
value: Math.random()
}
},
methods: {
handlerClick: function (e) {
console.log('点击删除按钮')
this.$emit('delete', this.title)
}
}
})
Vue.component("todo-list", {
template: '' +
'<ul>' +
'<slot><slot>' +
'</ul>',
data: function () {
return {
list: [
{
title: '课程1',
del: false
},
{
title: '课程2',
del: true
}
]
}
},
methods: {
handlerDelete(val) {
console.log('handlerDelete', val)
}
}
})
var vm = new Vue({
el: '#app',
data: {
message: 'hello world',
list: [
{
title: '课程1',
del: false
},
{
title: '课程2',
del: true
}
]
}
})
</script>
</body>
</html>
