Vue入门学习笔记：TodoList（十）：实现todolist的删除功能父组件 --> 子组件子组件 --> 父组件

69 阅读 0 评论 46 点赞

我是靠谱客的博主怕孤独口红，最近开发中收集的这篇文章主要介绍Vue入门学习笔记：TodoList（十）：实现todolist的删除功能父组件 --> 子组件子组件 --> 父组件，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

目录：
Vue入门学习笔记：TodoList（一）：HelloWorld
Vue入门学习笔记：TodoList（二）：挂载点、模板、实例
Vue入门学习笔记：TodoList（三）：实例中的数据、事件和方法
Vue入门学习笔记：TodoList（四）：属性绑定和双向数据绑定
Vue入门学习笔记：TodoList（五）：计算属性和侦听器
Vue入门学习笔记：TodoList（六）：v-if, v-show, v-for指令
Vue入门学习笔记：TodoList（七）：todolist功能开发
Vue入门学习笔记：TodoList（八）：todolist组件拆分
Vue入门学习笔记：TodoList（九）：组件与实例的关系
Vue入门学习笔记：TodoList（十）：实现todolist的删除功能
Vue入门学习笔记：TodoList（十一）：vue-cli的简介与使用
Vue入门学习笔记：TodoList（十二）：使用vue-cli开发todolist
Vue入门学习笔记：TodoList（十三）：全局样式与局部样式

父子组件的通讯，重点。

知识点：传递数据
1.父组件–>子组件：父组件和子组件通过属性props的形式传递值，例如上面的str属性
2.子组件–>父组件：我们需要删除父组件中的list，可以需要通过发布-订阅模式来做

方法：增加index，让父组件接收到下标

父组件 --> 子组件

下面代码展示了如何输出下标

<body>
    <div id="root">
        <input v-model="inputVal">
        <button @click="funcClick">提交</button>
        <ul>
            <todo-item 
                v-for = "(item, index) of list" 
                :key = "index" 
                :str = "item"
                :index = "index" 
            >
            <!-- 上面增加index -->
            </todo-item>
        </ul>
    </div>
    <script>
        Vue.component('todo-item', {
            props: ['str', 'index'], //增加index
            template: '<li @click="funcClick">{{str}} {{index}}</li>',   //增加index
            methods: { 
                funcClick: function(){
                    alert('click!!!')
                }
            }
        })
        new Vue(
            {
                el: "#root",
                data: {
                    inputVal: 'hello',
                    list:[]
                },
                methods: {
                    funcClick: function(){
                        this.list.push(this.inputVal)
                        this.inputVal = ''
                    }
                }
            }
        )
    </script>
</body>

子组件 --> 父组件

有了下标之后，下面实现对应的方法
首先，在子组件点击的方法中，使用$emit发一个叫delete的事件
然后，在父组件的模板中使用@来监听delete

<body>
    <div id="root">
        <input v-model="inputVal">
        <button @click="funcClick">提交</button>
        <ul>
            <todo-item 
                v-for = "(item, index) of list" 
                :key = "index" 
                :str = "item"
                :index = "index"
                @delete="funcDelete"    
            >
            </todo-item>
        </ul>
    </div>
    <script>
        Vue.component('todo-item', {
            props: ['str', 'index'], 
            template: '<li @click="funcClick">{{str}} {{index}}</li>',
            methods: { 
                funcClick: function(){
                    this.$emit('delete', this.index)    //抛出事件
                }
            }
        })
        new Vue(
            {
                el: "#root",
                data: {
                    inputVal: 'hello',
                    list:[]
                },
                methods: {
                    funcClick: function(){
                        this.list.push(this.inputVal)
                        this.inputVal = ''
                    },
                    funcDelete: function(index){
                        this.list.splice(index, 1)  //定义响应事件的操作
                    }
                }
            }
        )
    </script>
</body>