这个听的云里雾里，下面是一个示例demo
<!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="title1"></todo-title>
<todo-nie slot="todo-nie" v-for="(item,index) in items" v-bind:item="item" v-bind:index="index"
v-on:remove="removeitem(index)"></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', 'index'],
template: '<li>{{index}}---{{item}}<button @click="remove">删除</button></li>',
methods: {
remove: function (index) {
this.$emit('remove', index)
}
}
})
// 创建一个新的 Vue 实例
var vm = new Vue({
el: '#app',
data: {
items: ['带土', '爱', '琳'],
title1: '标题'
},
methods: {
removeitem: function (index) {
console.log("删除了" + this.items[index] + "ok")
this.items.splice(index, 1);//删除一个元素
}
}
});
</script>
</body>
</html>
标签：分发,Vue,自定义,index,title,component,事件,template,todo From： https://www.cnblogs.com/daitu66/p/17535114.html