<template>

<div>

<div>

<h1>Todolist</h1>

<br />

<input v-model="inputvelue" />

<button @click="handleClick" :key="index" :content="item" :index="index" @delete="handledelete">提交</button>

</div>

<ul>

<todo-item v-for="(item, index) of list ">

</todo-item>

</ul>

</div>

</template>

<script>

import todo from './components/todo.vue'

export default {

components: {

'todo-item': todo

},

data: function() {

return {

inputvelue: '',

list: []

}

},

methods: {

handleClick() {

this.list.push(this.inputvelue)

this.inputvelue = ''

},

handledelete(index) {

this.list.splice(index, 1)

}

}

}

</script>

<style>

</style>

<template>

<li @click="handledelete">{{comtent}}</li>

</template>

<script>

export default {

props: ['content', 'index'],

methods: {

handledelete() {

this.$emit('delete', this.index)

}

}

}

</script>

<style scoped>

</style>

下面是子組件