Vue学习：todolist-自定义事件

最新推荐文章于 2024-09-09 15:46:54 发布

¡Venceremo

最新推荐文章于 2024-09-09 15:46:54 发布

阅读量66

点赞数

分类专栏： Vue 文章标签：学习 Powered by 金山文档

本文链接：https://blog.csdn.net/weixin_47295886/article/details/129215551

版权

Vue 专栏收录该内容

155 篇文章 1 订阅

订阅专栏

该文章介绍了如何在Vue.js应用中，将todolist案例中的标准事件替换为自定义事件。子组件(myHeader)通过$emit触发receive事件，传递新创建的todo对象给父组件。同时，myFooter组件使用自定义事件checkAllTodo和clearAllTodo来更新列表状态和删除所有条目。

摘要由CSDN通过智能技术生成

将todolist案例中的子给父传递的事件，全部变成自定义事件

APP的子由footer header

父组件上

         <!-- 自定义事件receive,里面的回调函数“receive” -->
                <myHeader @receive="receive" />

子组件

            add() {
                //去掉前后空格
                if (!this.title.trim()) return alert('输入无效')
                //将用户的输入变成用户的todo对象
                // uuid生成全球唯一 id title:e.target.value,
                const todoObj = { id: nanoid(), title: this.title, done: false }
                this.$emit('receive',todoObj)
                // e.target.value=''//清空
                this.title = ''

            }

什么组件触发，事件名，传递的参数

  <myFooter :todos="todos" @checkAllTodo="checkAllTodo"
                            @clearAllTodo="clearAllTodo"/>

子：

            isAll: {
                get() {
                    return this.doneTotal === this.total && this.total
                },
                set(value) {
                    //对数据进行才这样
                    this.$emit("checkAllTodo",value)
                }

        methods: {
            // checkAll(e) {
            //     //对数据进行才这样
            //     this.$emit("checkAllTodo",e.target.checked)

            // },
            clear() {
                if (confirm('确定删除吗')) {
                    //通知app删除
                    this.$emit("clearAllTodo")
                }

            }
        },