vue 用cli完成todolist

今天学习了一下如何用vue 的cli 来完成todolist功能的开发。

创建两个文件，如下：

1.todoList.vue父组件的完整代码如下:

<template>
          <div>
            <input type="text" v-model="inputValue">
            <button @click="handleSubmit">提交</button>
            <br>
            <ul>
                <todo-item 
                v-for="(item, index) of list" 
                :key="index"
                :content="item"
                :index="index"
                @delete="handleDelete"
                ></todo-item>
            </ul>
        </div>
</template>

<script>
import todoItem from './todoItem'
export default {
    components: {
        'todo-item': todoItem,
    },
    data() {
        return {
            inputValue: '',
            list:[]

        }
    },
    methods: {
        handleSubmit(){
            this.list.push(this.inputValue)
            this.inputValue = ''
        },
        handleDelete(index){
            this.list.splice(index,1)
        }
    },

}
</script>

<style>

</style>

2.todoItem.vue子组件的完整代码如下：

<template>
    <li @click="handleDelete">{{content}}</li>
</template>
<script>
    export default {
        //父子组件传值如此通信
        props: ['content','index'], 
        methods: {
            handleDelete(){
                // alert(this.index)
                //子组件触发了事件出去，父组件那边需要监听并处理 delete
                this.$emit('delete',this.index)
            }
        }
    }
</script>
<style scoped>

</style>

父子组件 数据传递通过 props:['content','index']来通信。

子组件的删除事件通过  this.$emit('delete',this.index) 触发父组件那边需要监听并处理