vue2基础组件通信案例练习：把案例Todo-list改成使用全局事件总线

2024-10-24 19

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： vue2基础组件通信案例练习：把案例Todo-list改成使用全局事件总线

@[toc]

改动的地方

注意点1：使用地方App和MyItem之间使用全局事件总线，之前方式是App传给MyList，然后MyList再传给MyItem，之前缺陷是MyList只作为传递着啥都不干，显得太绕圈，太多余。

main.js

new Vue({
   
    el:'#app',
    render: h => h(App),
    beforeCreate() {
   
        Vue.prototype.$bus = this
    },
})

App.vue

methods: {
   
//勾选or取消勾选一个todo
    checkTodo(id){
   
        this.todos.forEach((todo)=>{
   
            if(todo.id === id) todo.done = !todo.done
        })
    }
},
mounted() {
   
    this.$bus.$on('checkTodo',this.checkTodo)
    this.$bus.$on('deleteTodo',this.deleteTodo)
},
beforeDestroy() {
   
    this.$bus.$off('checkTodo')
    this.$bus.$off('deleteTodo')
},

MyItem.vue

<input type="checkbox" :checked="todo.done" @change="handleCheck(todo.id)"/>

methods: {
   
    //勾选or取消勾选
    handleCheck(id){
   
        //通知App组件将对应的todo对象的done值取反
        // this.checkTodo(id)
        this.$bus.$emit('checkTodo',id)
    },
    //删除
    handleDelete(id){
   
        if(confirm('确定删除吗？')){
   
            //通知App组件将对应的todo对象删除
            // this.deleteTodo(id)
            this.$bus.$emit('deleteTodo',id)
        }
    }
},

案例全部代码

main.js

main.js

//引入Vue
import Vue from 'vue'
//引入App
import App from './App.vue'
//关闭Vue的生产提示
Vue.config.productionTip = false

//创建vm
new Vue({
   
    el:'#app',
    render: h => h(App),
    beforeCreate() {
   
        Vue.prototype.$bus = this
    },
})

App.vue

App.vue

MyHeader.vue

MyHeader.vue

<template>
    <div class="todo-header">
        <input type="text" placeholder="请输入你的任务名称，按回车键确认" v-model="title" @keyup.enter="add"/>
    </div>
</template>

<script>
    import {
   nanoid} from 'nanoid'
    export default {
   
        name:'MyHeader',
        data() {
   
            return {
   
                //收集用户输入的title
                title:''
            }
        },
        methods: {
   
            add(){
   
                //校验数据
                if(!this.title.trim()) return alert('输入不能为空')
                //将用户的输入包装成一个todo对象
                const todoObj = {
   id:nanoid(),title:this.title,done:false}
                //通知App组件去添加一个todo对象
                this.$emit('addTodo',todoObj,1,2,3)
                //清空输入
                this.title = ''
            }
        },
    }
</script>

<style scoped>
    /*header*/
    .todo-header input {
   
        width: 560px;
        height: 28px;
        font-size: 14px;
        border: 1px solid #ccc;
        border-radius: 4px;
        padding: 4px 7px;
    }

    .todo-header input:focus {
   
        outline: none;
        border-color: rgba(82, 168, 236, 0.8);
        box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
    }
</style>

MyList.vue

MyList.vue

<template>
    <ul class="todo-main">
        <MyItem 
            v-for="todoObj in todos"
            :key="todoObj.id" 
            :todo="todoObj" 
        />
    </ul>
</template>

<script>
    import MyItem from './MyItem'

    export default {
   
        name:'MyList',
        components:{
   MyItem},
        //声明接收App传递过来的数据
        props:['todos']
    }
</script>

<style scoped>
    /*main*/
    .todo-main {
   
        margin-left: 0px;
        border: 1px solid #ddd;
        border-radius: 2px;
        padding: 0px;
    }

    .todo-empty {
   
        height: 40px;
        line-height: 40px;
        border: 1px solid #ddd;
        border-radius: 2px;
        padding-left: 5px;
        margin-top: 10px;
    }
</style>

MyItem.vue

MyItem.vue

<template>
    <li>
        <label>
            <input type="checkbox" :checked="todo.done" @change="handleCheck(todo.id)"/>
            <!-- 如下代码也能实现功能，但是不太推荐，因为有点违反原则，因为修改了props -->
            <!-- <input type="checkbox" v-model="todo.done"/> -->
            <span>{
   {
   todo.title}}</span>
        </label>
        <button class="btn btn-danger" @click="handleDelete(todo.id)">删除</button>
    </li>
</template>

<script>
    export default {
   
        name:'MyItem',
        //声明接收todo
        props:['todo'],
        methods: {
   
            //勾选or取消勾选
            handleCheck(id){
   
                //通知App组件将对应的todo对象的done值取反
                // this.checkTodo(id)
                this.$bus.$emit('checkTodo',id)
            },
            //删除
            handleDelete(id){
   
                if(confirm('确定删除吗？')){
   
                    //通知App组件将对应的todo对象删除
                    // this.deleteTodo(id)
                    this.$bus.$emit('deleteTodo',id)
                }
            }
        },
    }
</script>

<style scoped>
    /*item*/
    li {
   
        list-style: none;
        height: 36px;
        line-height: 36px;
        padding: 0 5px;
        border-bottom: 1px solid #ddd;
    }

    li label {
   
        float: left;
        cursor: pointer;
    }

    li label li input {
   
        vertical-align: middle;
        margin-right: 6px;
        position: relative;
        top: -1px;
    }

    li button {
   
        float: right;
        display: none;
        margin-top: 3px;
    }

    li:before {
   
        content: initial;
    }

    li:last-child {
   
        border-bottom: none;
    }

    li:hover{
   
        background-color: #ddd;
    }

    li:hover button{
   
        display: block;
    }
</style>

MyFooter.vue

MyFooter.vue

<template>
    <div class="todo-footer" v-show="total">
        <label>
            <!-- <input type="checkbox" :checked="isAll" @change="checkAll"/> -->
            <input type="checkbox" v-model="isAll"/>
        </label>
        <span>
            <span>已完成{
   {
   doneTotal}}</span> / 全部{
   {
   total}}
        </span>
        <button class="btn btn-danger" @click="clearAll">清除已完成任务</button>
    </div>
</template>

<script>
    export default {
   
        name:'MyFooter',
        props:['todos'],
        computed: {
   
            //总数
            total(){
   
                return this.todos.length
            },
            //已完成数
            doneTotal(){
   
                //此处使用reduce方法做条件统计
                /* const x = this.todos.reduce((pre,current)=>{
                    console.log('@',pre,current)
                    return pre + (current.done ? 1 : 0)
                },0) */
                //简写
                return this.todos.reduce((pre,todo)=> pre + (todo.done ? 1 : 0) ,0)
            },
            //控制全选框
            isAll:{
   
                //全选框是否勾选
                get(){
   
                    return this.doneTotal === this.total && this.total > 0
                },
                //isAll被修改时set被调用
                set(value){
   
                    // this.checkAllTodo(value)
                    this.$emit('checkAllTodo',value)
                }
            }
        },
        methods: {
   
            /* checkAll(e){
                this.checkAllTodo(e.target.checked)
            } */
            //清空所有已完成
            clearAll(){
   
                // this.clearAllTodo()
                this.$emit('clearAllTodo')
            }
        },
    }
</script>

<style scoped>
    /*footer*/
    .todo-footer {
   
        height: 40px;
        line-height: 40px;
        padding-left: 6px;
        margin-top: 5px;
    }

    .todo-footer label {
   
        display: inline-block;
        margin-right: 20px;
        cursor: pointer;
    }

    .todo-footer label input {
   
        position: relative;
        top: -1px;
        vertical-align: middle;
        margin-right: 5px;
    }

    .todo-footer button {
   
        float: right;
        margin-top: 5px;
    }
</style>